Table

Table is for rows people work with: sorting, selecting, opening or running a command on a record. It acts as one tab stop with arrow-key movement, and leaves data loading, paging and sorting logic to your app.

Install

bashnpx shadcn@4.18.0 add @siteplane/table

Import it from @/siteplane/components/table. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Native Table: Pick Native Table for read-only content or cells full of inputs that need their own tab stops.
• vs Resource List: Pick Resource List for a one-column list of entities with a status marker and a little metadata.
• vs Data List: Pick Data List to show the fields of a single record.

Rules

• Put TableHead cells directly in TableHeader, mark the identifying column with isRowHeader, and give rich rows a plain textValue.
• Give the table a name with aria-label, aria-labelledby or a direct TableCaption.
• For sorting, set allowsSorting, handle onSortChange, update sortDescriptor and reorder the data yourself.
• For bulk selection use selectionMode="multiple" with selectionTrigger="checkbox" and TableSelectionCheckbox, and handle a Selection that can be the string "all".
• Show empty results with TableBody renderEmptyState, and set aria-busy on the surrounding region while loading since there is no loading prop.
• Let wide tables scroll inside their container instead of squeezing columns.

Reference

• Table docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Data display. Read the installed source under src/siteplane before relying on an API.