Basics

Tables

Semantic, horizontally scrollable tables from shadcn’s Base UI collection.

Table playground

Sort by name or inspect an empty table.

Example assessment participants
	Assessment Center
Alex Buckmaster	Kaufleute
James Hall	Mechaniker
Kathy Pacheco	Kaufleute
3 participants

Properties

Empty table

Use keyboard focus on the name heading to sort. Narrow the preview to inspect horizontal scrolling. Sorting state and data belong to the caller.

Usage and props

Import shared components from @wafm/ui. Keep workflow state and data fetching in the application.

Table

import { Table, TableCaption, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@wafm/ui/components/table'

<Table>
  <TableCaption>Participants</TableCaption>
  <TableHeader><TableRow><TableHead>Name</TableHead></TableRow></TableHeader>
  <TableBody><TableRow><TableCell>Alex Buckmaster</TableCell></TableRow></TableBody>
</Table>

HTML table props / className: Semantic table inside a horizontal scroll container. Apply a min-width to the table when columns must retain their width.

TableHeader / TableBody / TableFooter

<TableHeader>{headingRows}</TableHeader>
<TableBody>{rows}</TableBody>
<TableFooter>{totalsRow}</TableFooter>

Native thead / tbody / tfoot props: Section wrappers. Header rows have a divider; the final body row has none. Footer has a muted background and top divider.

TableRow / TableHead / TableCell

<TableRow>
  <TableHead scope="col" aria-sort="ascending">Name</TableHead>
</TableRow>
<TableRow><TableCell>Alex</TableCell></TableRow>

Native tr / th / td props: Head defaults to scope=col and 40px height. Row accepts data-state=selected. Cell supports wrapping; choose truncate or whitespace-nowrap deliberately. Put aria-sort on the active column heading.

TableCaption

<TableCaption className="sr-only">Activity of participants</TableCaption>

Native caption props: Names the table; can be visible or visually hidden. Keep a caption or another accessible table name.

TableSortButton

<TableHead aria-sort={direction}>
  <TableSortButton direction={direction} onClick={sortByName}>Name</TableSortButton>
</TableHead>

direction: none (default), ascending, or descending; changes the decorative chevron. The caller owns sorting and the parent heading’s aria-sort.
Button props / children: Existing ghost Button with column label and keyboard activation. Supports disabled, className, and onClick.