Native Table

Native Table renders real table elements for content people read, such as reports, price lists, estimates and markdown tables. Inputs and buttons inside cells behave normally and can belong to a surrounding form.

Install

bashnpx shadcn@4.18.0 add @siteplane/native-table

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

When to pick it

• vs Table: Pick Table when rows are sorted, selected or activated with arrow-key navigation.
• vs Data List: Pick Data List for a single record's label and value pairs.
• vs Typeset: Typeset already maps markdown tables onto Native Table, so do not wire it by hand there.

Rules

• Name the table with aria-label or a NativeTableCaption placed first inside NativeTable.
• Make the cell that identifies a row a NativeTableHead with scope="row".
• Use tone on NativeTableRow for section, total or muted rows, and turn off hover on section rows with hoverable={false}.
• Set align="end" on number columns so digits line up, and on their headings too.
• Set minWidth when columns need more room than a phone gives, so the table scrolls inside its container.
• Do sorting, filtering, paging and totals in your app; the table holds no state.

Reference

• Native 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.