Component
Dense numbers people compare across rows and columns — an option chain, a statement. A real <table>, with the parts tables don't do on their own: a reachable scroll area, sticky key columns, sorting that announces itself, and row markers that don't rely on colour.
<tai-data-table id="chain" class="stretch" caption="Sample index option chain" description="Illustrative numbers, not market data. Spot 24,180." density="compact" style="max-height: 26rem"></tai-data-table>
<tai-data-table id="statement" class="stretch" caption="Current account ••••1093 — September" empty-text="No transactions this month"></tai-data-table>
<div class="log" role="log" aria-label="Sort events" id="log-sort"></div>Give it columns and rows as properties. Formatting, classes and screen-reader-only suffixes are functions of the row.
const table = document.querySelector('#statement')
table.columns = [
{ key: 'date', label: 'Date', sortable: true },
{ key: 'description', label: 'Description', rowHeader: true },
{ key: 'amount', label: 'Amount', align: 'end', sortable: true,
format: r => gbp(r.amount),
srSuffix: r => (r.amount < 0 ? 'paid out' : 'paid in') },
]
table.rows = transactionsAlready rendering a table yourself? Wrap it: with no columns set, the element keeps your markup and adds the labelled, keyboard-reachable scroll region.
<tai-data-table caption="Fees">
<table>…your rows…</table>
</tai-data-table>| Name | Kind | Description |
|---|---|---|
columns | property | Column definitions (next table). |
groups | property | [{ id, label, className }]. Consecutive columns with the same group share a header (scope="colgroup"). |
rows | property | The data. Setting it re-renders the body only; scroll position and header focus are kept. |
rowMarker | property | row => ({ label, short }) | null. Adds a visible badge (short) and spoken text (label) to the row header. |
rowClass | property | row => string. |
sort | property | { key, direction } or null. |
caption, description | attributes | The table's caption (also names the region) and a second line. |
caption-hidden | attribute | Keeps the caption for screen readers only. |
empty-text | attribute | Shown when there are no rows. |
update-message | attribute | Announced politely each time rows change after the first render (e.g. “Option chain updated”). Leave unset for fast-moving data. |
busy | attribute | Sets aria-busy on the table while loading. |
density | attribute | compact for dense numeric tables. |
tai-sort | event, cancellable | detail: { key, direction }. Cancel it to sort on the server; the header state still updates. |
--tai-dt-sticky-bg, --tai-dt-marker-color, --tai-dt-group-row-height | custom properties | Sticky column background, marked-row border, second sticky header row offset. |
| Key | Type | Description |
|---|---|---|
key, label | string | Data key and visible header. |
srLabel | string | Replaces the header for screen readers (“Calls open interest” for “OI”). |
group | string | Group id. Grouped headers get the group name as hidden prefix text. |
rowHeader | boolean | Render cells as <th scope="row"> — the cell that names the row. |
sticky | boolean | Stays visible while scrolling sideways (sticks to whichever edge it reaches). |
align | start | end | center | Numbers: end. |
sortable, sortValue | boolean, function | Header becomes a button; sortValue(row) overrides the value sorted on. |
format | function | row => string | Node. |
srSuffix | function | row => string, appended as visually hidden text (“highest”, “paid out”). |
cellClass, cellStyle, headerClass | function / string | Styling hooks. Light DOM, so app CSS (including Tailwind) applies. |
| Key | Action |
|---|---|
| Tab | Reaches the table's scroll area when it overflows (no extra stop when it fits), then any sortable headers. |
| ← → ↑ ↓ | With the scroll area focused, scroll it — so columns past the edge are reachable without a mouse. |
| Enter / Space | On a sortable header: sort ascending, then descending. |
| Screen reader table keys | Kept intact (e.g. NVDA/JAWS Ctrl Alt + arrows; VoiceOver VO + arrows), because this is a real table — see below. |
A grid turns the table into a single widget: arrow keys move a cell cursor and screen readers switch to application mode. That's right for spreadsheets and cells you edit or act on. For reading and comparing numbers it's worse — users lose their screen reader's own table navigation and header announcements. So this component is a table, and grid behaviour is something to opt into only when cells become interactive (for example “select a strike to add a leg”).
An option chain has “LTP”, “OI” and “IV” twice — once under Calls, once under Puts. scope="colgroup" is the standard answer, but screen readers announce group headers unevenly. So each grouped header also carries its group as visually hidden prefix text: the cell is announced as “Calls LTP”, not just “LTP”, in every screen reader.
aria-sort.rowHeader.srSuffix or rowMarker.React 19 sets columns, rows and rowMarker as properties, so functions and arrays arrive intact. Keep columns stable with useMemo.
import '@tradeaialgo/tai-ui'
const columns = useMemo(() => buildChainColumns(spot), [spot])
return (
<tai-data-table caption="NIFTY option chain" density="compact"
columns={columns} groups={GROUPS} rows={rows}
rowMarker={r => (r.atm ? { label: 'At the money', short: 'ATM' } : null)} />
)