Renders a semantic `<table>` either from the `columns` + `data` properties (data-driven mode) or from slotted `<thead>` / `<tbody>` markup (slotted mode, used when `columns`/`data` are not both set). The horizontal scroll container lives INSIDE the component so a wide table scrolls itself — the page never scrolls. Cell/header padding uses the theme's `--al-theme-space-*` tokens, so the table is automatically density-aware wherever it is rendered inside a `<al-theme density="...">` scope.
PLAYGROUND3 CONTROLS
PREVIEW / al-table / ALTITUDE
Loading preview
sortDirection
FLAGS
CODE — HTML / REACT
Guidance
NOT YET AUTHORED · 20 COMPONENTS COVERED
NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.
FIGMA PARITYALTITUDE DESIGN SYSTEM
BOTH CHANGEDAltitude Design SystemFIGMA SET · Table5 PROPERTY DIFFSFROM TRACKED PROJECTION
Code and Figma each changed since the last confirmed sync. Neither side should be overwritten blindly.
DECIDED BY
CONTRACT DIFF
FIGMA SIDE
OBSERVED
LAST CONFIRMED SYNC
2026-08-28
PUBLIC SURFACE
8 ATTR · 1 SLOT · 3 EVENT · 2 PART
The component’s public surface — attributes and their value sets, slots, events, CSS parts and custom properties, from the manifest — compared against the Figma set’s property definitions.
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 6 STORIES.
import '@southleft/al-web-components/components/table';
import { ALTable } from '@southleft/al-react';
API — 8 PROPS8 DOCUMENTED
PROPTYPEDEFAULT
columnsArray<ALTableColumn>Column definitions for data-driven rendering. Must be paired with `data`.
Settable as a JSON attribute as well as a property. It used to be
`attribute: false`, which meant the table could only ever be driven from
JavaScript: any consumer writing static HTML — SSR, a plain page, or this
library's own generated documentation preview, which serialises a story to
markup — got an empty table with no way to fill it.—
dataArray<ALTableRow>Row data for data-driven rendering. Must be paired with `columns`.
When either `columns` or `data` is not provided, the default slot is
rendered instead so a consumer may supply their own `<thead>`/`<tbody>`.—
rowKeystringThe property on each row object used to derive a stable row identifier
(used for selection tracking and the `key` attribute).'id'
captionstringVisible table caption. Also used as the accessible name of the scroll
container so keyboard users know what they're scrolling.—
hideCaptionbooleanVisually hides the caption while keeping it in the accessibility tree.—
isSelectablebooleanShows a leading checkbox column for row selection.—
sortKeystringThe `key` of the column currently sorted, if any.—
sortDirection'ascending' | 'descending' | 'none'The sort direction of `sortKey`. Mirrors the `aria-sort` vocabulary.'none'
SLOTS1
SLOTDESCRIPTION
(default)Slotted `<table>`-internal markup (e.g. `<thead>`/`<tbody>`), used only when `columns` and `data` are not both provided.
EVENTS3
EVENTDESCRIPTIONTYPE
onTableSortFired when a sortable header is activated. Detail: `{ key, direction }`. `al-table` does not re-sort `data` itself — it tracks and displays the active sort state (`sortKey`/`sortDirection`, reflected via `aria-sort`); re-render with sorted `data` in response to this event.CustomEvent
onTableRowSelectFired when a row's selection checkbox is toggled. Detail: `{ rowKey, isSelected, selectedRowKeys }`.CustomEvent
onTableSelectAllFired when the header's select-all checkbox is toggled. Detail: `{ isSelected, selectedRowKeys }`.CustomEvent
CSS PARTS2
PARTDESCRIPTION
scrollThe horizontal scroll container.
tableThe `<table>` element (data-driven mode only).