Tables
Various responsive data table patterns.
Data Table to List
Responsive table that renders as a list for mobile views. Column header text is displayed using data attributes.
Component Props
tableHeaders: [array] - list of header columns
- headerTitle: [string] Table header column label
tableRows: [array] - list of rows with cell content
- row:
- headerTitle: title
cellData: name
- headerTitle: title
cellData: name
- row:
- headerTitle: title
cellData: name
- headerTitle: title
cellData: name
Props Used:
modifier: table-hover
ariaLabel: Data Table
tableHeaders:
- headerTitle: Column Label 2
- headerTitle: Column Label 2
- headerTitle: Column Label 3
- headerTitle: Column Label 4
tableRows:
- row:
- headerTitle: Column Label 1 (optional)
cellData: Row Item
- headerTitle: Column Label 2
cellData: Cell Value
- headerTitle: Column Label 3
cellData: Cell Value
- headerTitle: Column Label 4
cellData: <a href="#" class="stretched-link">Cell Link</a>
- row:
- cellData: Row Item
- headerTitle: Column Label 2
cellData: Cell Value
- headerTitle: Column Label 3
cellData: null
- headerTitle: Column Label 4
cellData: <a href="#">Cell Link</a>
<table class="table table-list table-hover" aria-label="Data Table">
<thead>
<tr>
<th scope="col">Column Label 2</th>
<th scope="col">Column Label 2</th>
<th scope="col">Column Label 3</th>
<th scope="col">Column Label 4</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" data-title="Column Label 1 (optional)">Row Item</th>
<td data-title="Column Label 2">
Cell Value
</td>
<td data-title="Column Label 3">
Cell Value
</td>
<td data-title="Column Label 4">
<a href="#" class="stretched-link">Cell Link</a>
</td>
</tr>
<tr>
<th scope="row">Row Item</th>
<td data-title="Column Label 2">
Cell Value
</td>
<td data-title="Column Label 3" class="no-data-cell">
</td>
<td data-title="Column Label 4">
<a href="#">Cell Link</a>
</td>
</tr>
</tbody>
</table>