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
Airframe
Web Components
React
React Native
Anatomy
Caption
Describes the purpose and content of the table. Required for accessibility.
Table header
Contains column headings using <th> elements. Helps users understand the relationship between headings and data.
Table body
Contains the main table data in rows and cells. May include row headings with scope="row".
Table footer (optional)
For summary rows, totals, or supporting information.
Scrollable container
When the scrollable attribute is used, wraps the table to enable horizontal scrolling on smaller screens.
Design Documentation
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.
By default, table cell content is left-aligned. Use the ba-c-table--align-right CSS class to align content differently if needed. This is particularly useful for numerical data, where right alignment can improve readability and comparison across rows.
Never use center alignment for table content, as it can make it harder for users to scan and compare information.
Live Demo
| Flight | Departure | Arrival | Status |
|---|---|---|---|
| BA132 | London Heathrow | Newcastle | On time |
| BA145 | London Heathrow | Edinburgh | Delayed |
| BA198 | London Heathrow | Manchester | On time |
<ba-table>
<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>
<tr>
<td>BA198</td>
<td>London Heathrow</td>
<td>Manchester</td>
<td>On time</td>
</tr>
</tbody>
</table>
</ba-table>
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 |
Permitted ARIA roles
- None
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | Elements will render in the body of the component | <table> |
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>Aligning cell content
By default, table cell content is left-aligned. Use the ba-c-table--align-right CSS class to align content differently if needed.
<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 class="ba-c-table--align-right">400</td>
<td class="ba-c-table--align-right">100</td>
</tr>
<tr>
<td>February</td>
<td class="ba-c-table--align-right">300</td>
<td class="ba-c-table--align-right">50</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td class="ba-c-table--align-right">700</td>
<td class="ba-c-table--align-right">150</td>
</tr>
</tfoot>
</table>
</ba-table>Guidelines
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.
Keyboard navigation
ba-table is a non-interactive wrapper component
The component itself has no keyboard interactions. Standard table navigation applies to content within the table