Stalk UI

Component

Table

Presents rows and columns of data in an accessible HTML table.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/table

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<Table.Root>
  <Table.Caption>Recent invoices.</Table.Caption>
  <Table.Header>
    <Table.Row>
      <Table.Head scope="col">Invoice</Table.Head>
      <Table.Head scope="col">Status</Table.Head>
      <Table.Head scope="col">Amount</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>INV-001</Table.Cell>
      <Table.Cell>
        <Badge tone="success" variant="subtle">
          Paid
        </Badge>
      </Table.Cell>
      <Table.Cell>$250.00</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>INV-002</Table.Cell>
      <Table.Cell>
        <Badge tone="warning" variant="subtle">
          Pending
        </Badge>
      </Table.Cell>
      <Table.Cell>$150.00</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>
Theme
<Table.Root>
  <Table.Header>
    <Table.Row>
      <Table.Head scope="col">Name</Table.Head>
      <Table.Head scope="col">Role</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row data-state="selected">
      <Table.Cell>Ada Lovelace</Table.Cell>
      <Table.Cell>Owner</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Linus Torvalds</Table.Cell>
      <Table.Cell>Maintainer</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`detail``ReactNode`Yes-Detail content revealed below the row, in a cell spanning \`colSpan\` columns.
`colSpan``number`Yes-Number of columns the detail cell spans.
`open``boolean`No-Controlled open state.
`defaultOpen``boolean`No-Initial open state when uncontrolled.
`onOpenChange``(open: boolean) => void`No-Called when the open state changes.
PropTypeRequiredDefaultDescription
`label``string`No-Accessible label for the toggle. Default \`"Toggle row details"\`.
PropTypeRequiredDefaultDescription
`containerProps``HTMLAttributes<HTMLDivElement>`No-Props applied to the scroll container wrapping the \`<table>\`.
`stickyHeader``boolean`No-Keep the header rows pinned while the body scrolls. Pair with a max-height +<br />\`overflowY: 'auto'\` on \`containerProps\` to get the vertical scroll region.<br />Freeze individual columns by setting \`data-pinned="start" \
`stickyFooter``boolean`No-Keep the footer rows pinned to the bottom while the body scrolls (mirror of<br /> \`stickyHeader\`; same \`containerProps\` scroll requirement).

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

VariantValues
`stickyHeader``true`
`stickyFooter``true`

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/table.json`
  • Recipe: `table`
  • Files: `src/components/ui/table.tsx`