ba-table
This component acts as a wrapper for tables to provide consistent spacing and typography. It also provides an optional scrollable layout for tables with many columns
GitHub
Storybook
Live Demo
| Lorem | Ipsum | Dolor |
|---|---|---|
| Pellentesque | placerat | justo |
| ut | volutpat | pulvinar |
| nunc | felis | cursus |
| eros | in | tempus |
| tellus | nisl | sed |
<ba-table>
<table>
<caption>
Table caption
</caption>
<thead>
<tr>
<th>Lorem</th>
<th>Ipsum</th>
<th>Dolor</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pellentesque</td>
<td>placerat</td>
<td>justo</td>
</tr>
<tr>
<td>ut</td>
<td>volutpat</td>
<td>pulvinar</td>
</tr>
<tr>
<td>nunc</td>
<td>felis</td>
<td>cursus</td>
</tr>
<tr>
<td>eros</td>
<td>in</td>
<td>tempus</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>tellus</td>
<td>nisl</td>
<td>sed</td>
</tr>
</tfoot>
</table>
</ba-table>Guidelines
Tables are not always the best way to display data. Consider alternative layouts such as cards, lists, or charts to present information in a more engaging and digestible way.
Use ba-table when users need to compare values or scan information across rows and columns.
Tables work best when the relationship between column headings and row data is important. If the content does not need to be compared in this way, use lists, cards, paragraphs or another layout instead.
Keep headings and cell content short and direct. This helps users scan across rows and understand how each cell relates to its heading.
If a cell needs long-form content, consider whether the information would be easier to understand outside of a table.
Tables with several columns can become difficult to read on smaller screens. Use the scrollable attribute when a table is likely to be wider than the available space.
When using scrollable, set a suitable min-width so the table keeps enough space for its columns and content.
Accessibility
ba-table wraps a native HTML <table> element. Always place a valid <table> inside the component and use the correct table elements to describe its structure.
The component should not replace native table semantics. The table structure should remain available to browsers, screen readers and other assistive technology.
Every table should include a <caption> that describes what the table is about.
A good caption helps users understand the purpose of the table before reading the rows and columns. It is also announced by screen readers and helps users decide whether the table contains the information they need.
Use <th> for cells that act as headings. Column headers help all users understand the relationship between each heading and the data underneath it. They are especially important for users of assistive technology.
Most tables should include column headings in a <thead>. If a table also needs row headings, use <th scope="row"> for the row heading cells.
Do not use <td> for headings just because it looks visually correct.
Table content should make sense when read from left to right and top to bottom.
Avoid splitting related information across disconnected rows or columns. If the table becomes too complex, consider simplifying the content or breaking it into smaller tables.
Code
Properties and Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
minWidth |
min-width |
Sets the minimum width of the table. If the content exceeds this width, a horizontal scrollbar will appear (only if scrollable is set to true). | string | undefined |
undefined |
scrollable |
scrollable |
Determines if the table should be scrollable | boolean | undefined |
false |
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | Elements will render in the body of the component | <table> |
Permitted ARIA roles
- None
Parent components
ba-table can be slotted into:
Usage
Basic usage
Place a native <table> element inside <ba-table>. Use a <caption> to describe the table, <thead> for column headings, <tbody> for the main table content and <tfoot> for summary or footer rows when needed.
<ba-table>
<table>
<caption>
Table caption
</caption>
<thead>
<tr>
<th>Lorem</th>
<th>Ipsum</th>
<th>Dolor</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pellentesque</td>
<td>placerat</td>
<td>justo</td>
</tr>
<tr>
<td>ut</td>
<td>volutpat</td>
<td>pulvinar</td>
</tr>
<tr>
<td>nunc</td>
<td>felis</td>
<td>cursus</td>
</tr>
<tr>
<td>eros</td>
<td>in</td>
<td>tempus</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>tellus</td>
<td>nisl</td>
<td>sed</td>
</tr>
</tfoot>
</table>
</ba-table>
Using a scrollable table
Use the scrollable attribute when the table may be wider than its container. This is useful for tables with several columns or content that should not wrap too tightly.
Set min-width to the minimum width the table needs before horizontal scrolling is introduced.
<ba-table scrollable min-width="62">
<table>
<caption>
Flight details
</caption>
<thead>
<tr>
<th>Flight</th>
<th>Departure</th>
<th>Arrival</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>BA132</td>
<td>London Heathrow</td>
<td>Newcastle</td>
<td>On time</td>
</tr>
<tr>
<td>BA145</td>
<td>London Heathrow</td>
<td>Edinburgh</td>
<td>Delayed</td>
</tr>
</tbody>
</table>
</ba-table>
Using row headings
Use row headings when the first cell in each row identifies the rest of the data in that row. Add scope="row" to the row heading cell.
<ba-table>
<table>
<caption>
Baggage allowance by cabin
</caption>
<thead>
<tr>
<th>Cabin</th>
<th>Checked bags</th>
<th>Cabin bags</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Euro Traveller</th>
<td>1 bag</td>
<td>1 cabin bag and 1 handbag</td>
</tr>
<tr>
<th scope="row">Club Europe</th>
<td>2 bags</td>
<td>1 cabin bag and 1 handbag</td>
</tr>
</tbody>
</table>
</ba-table>
Using a table footer
Use <tfoot> for summary rows, totals or supporting information that applies to the table columns.
<ba-table>
<table>
<caption>
Monthly points earned
</caption>
<thead>
<tr>
<th>Month</th>
<th>Base points</th>
<th>Bonus points</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>February</td>
<td>300</td>
<td>50</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td>700</td>
<td>150</td>
</tr>
</tfoot>
</table>
</ba-table>