Skip to main content

Table

Component status:Alpha
Tables are used to display tabular data in rows and columns.

Table Variants#

Default Table#

Table Caption
Column 1Column 2Column 3
Cell data A1Cell data B1Cell data C1
Cell data B1Cell data B2Cell data B3
Cell data C1Cell data C2Cell data C3
<table class="bux-table" summary="Some info about this default table.">
<caption>Table Caption</caption>
<thead>
<tr>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
<th scope="col">Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell data A1</td>
<td>Cell data B1</td>
<td>Cell data C1</td>
</tr>
<tr>
<td>Cell data B1</td>
<td>Cell data B2</td>
<td>Cell data B3</td>
</tr>
<tr>
<td>Cell data C1</td>
<td>Cell data C2</td>
<td>Cell data C3</td>
</tr>
</tbody>
</table>

Striped Table#

Column 1Column 2Column 3
Cell data A1Cell data B1Cell data C1
Cell data B1Cell data B2Cell data B3
Cell data C1Cell data C2Cell data C3
<table class="bux-table bux-table--striped" summary="Some info about this default table.">
<thead>
<tr>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
<th scope="col">Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell data A1</td>
<td>Cell data B1</td>
<td>Cell data C1</td>
</tr>
<tr>
<td>Cell data B1</td>
<td>Cell data B2</td>
<td>Cell data B3</td>
</tr>
<tr>
<td>Cell data C1</td>
<td>Cell data C2</td>
<td>Cell data C3</td>
</tr>
</tbody>
</table>

Compact Table#

Column 1Column 2Column 3
Cell data A1Cell data B1Cell data C1
Cell data B1Cell data B2Cell data B3
Cell data C1Cell data C2Cell data C3
<table class="bux-table bux-table--compact" summary="Some info about this compact table.">
<thead>
<tr>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
<th scope="col">Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell data A1</td>
<td>Cell data B1</td>
<td>Cell data C1</td>
</tr>
<tr>
<td>Cell data B1</td>
<td>Cell data B2</td>
<td>Cell data B3</td>
</tr>
<tr>
<td>Cell data C1</td>
<td>Cell data C2</td>
<td>Cell data C3</td>
</tr>
</tbody>
</table>

Table with column and row headers#

Column 1Column 2Column 3
Row ACell data B1Cell data C1
Row BCell data B2Cell data B3
Row CCell data C2Cell data C3
<table class="bux-table" summary="Some info about this table with two headers.">
<thead>
<tr>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
<th scope="col">Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">Row A</td>
<td>Cell data B1</td>
<td>Cell data C1</td>
</tr>
<tr>
<td scope="row">Row B</td>
<td>Cell data B2</td>
<td>Cell data B3</td>
</tr>
<tr>
<td scope="row">Row C</td>
<td>Cell data C2</td>
<td>Cell data C3</td>
</tr>
</tbody>
</table>

Sortable Table#

Table Caption
Column 1Column 2Column 3
Cell data A1Cell data B1Cell data C1
Cell data B1Cell data B2Cell data B3
Cell data C1Cell data C2Cell data C3
<table class="bux-table bux-table--sortable" summary="Some info about this sortable table.">
<caption>Table Caption</caption>
<thead>
<tr>
<th scope="col" class="sort-by">Column 1</th>
<th scope="col" class="sort-by">Column 2</th>
<th scope="col" class="sort-by">Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell data A1</td>
<td>Cell data B1</td>
<td>Cell data C1</td>
</tr>
<tr>
<td>Cell data B1</td>
<td>Cell data B2</td>
<td>Cell data B3</td>
</tr>
<tr>
<td>Cell data C1</td>
<td>Cell data C2</td>
<td>Cell data C3</td>
</tr>
</tbody>
</table>

Implementation Notes#

Table variants can be combined by adding multiple modifier classes. The following example code will produce a striped table that is also compact.

<table class="bux-table bux-table--striped bux-table--compact">