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
`containerProps``HTMLAttributes<HTMLDivElement>`No-Props applied to the scroll container wrapping the \`<table>\`.

Variants

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

No recipe variants are documented for this component.

Registry

Files this component contributes to your registry install.

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