Table — Atelier

Demo

Live PreviewReact

Interactive demo coming soon. See the code example above.

jsx

<LlmTable variant="striped">
  <LlmThead>
    <LlmTr>
      <LlmTh sortable>Name</LlmTh>
      <LlmTh>Status</LlmTh>
    </LlmTr>
  </LlmThead>
  <LlmTbody empty={rows.length === 0} colSpan={2}>
    {rows.map(row => (
      <LlmTr key={row.id} selectable>
        <LlmTd>{row.name}</LlmTd>
        <LlmTd>{row.status}</LlmTd>
      </LlmTr>
    ))}
    <div llmTableEmpty>No results found</div>
  </LlmTbody>
</LlmTable>

API (Angular)

Prop	Type	Default	Description
`variant`	`'default' \| 'striped' \| 'bordered'`	`'default'`	Row background styling
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Vertical padding of cells
`stickyHeader`	`boolean`	`false`	Makes header row stick to the top on scroll
`aria-label`	`string`	`'Table'`	Accessible name for the scrollable wrapper region. Announced by screen readers when keyboard users focus the wrapper to scroll horizontally.

Composition parts

Table is composed from the parts below. Each part is its own component — drop the ones you don't need.

`LlmThead`

Header row container. Slot-only — takes no props.

`LlmTbody`

Body container. Renders its own empty state when empty is true.

Prop	Type	Default	Description
`empty`	`boolean`	`false`	Show an empty-state row instead of children.
`colSpan`	`number`	`—`	Number of columns the empty-state row should span.

`LlmTr`

A single row. Can be made selectable for row-level interaction.

Prop	Type	Default	Description
`selected`	`boolean`	`false`	Visual + ARIA selected state.
`selectable`	`boolean`	`false`	Makes the row keyboard-focusable and emits selection events.
`rowId`	`string`	`—`	Stable identifier for the row — used in selection change events.

`LlmTh`

A header cell. Make it sortable to expose a sort-toggle button.

Prop	Type	Default	Description
`sortable`	`boolean`	`false`	Shows a sort indicator and announces the column as sortable.
`sortDirection`	`'asc' \| 'desc' \| null`	`null`	Current sort state when sortable.
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Text alignment in the cell.
`width`	`string`	`—`	Explicit column width (any CSS length).

`LlmTd`

A body cell.

Prop	Type	Default	Description
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Text alignment in the cell.

Import

import { LlmTable, LlmThead, LlmTbody, LlmTr, LlmTh, LlmTd } from '@atelier-ui/angular';

Explore in Storybook