Table

Preview

Install

1. 1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.

   npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"

2. 2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.

   npx shadcn@latest add @txbrendan/theme

3. 3. Add the component.

   npx shadcn@latest add @txbrendan/table

Props

• size

  On Table. Row height and cell padding: a one-line row is as tall as a control of the same size. Density scales it.

  "sm" | "md" | "lg" · default "md"

• scrollLabel

  On Table. Makes the scroll container a focusable region with this name, so keyboard users can scroll a wide table. Use the caption's words.

  string

• Table

  A <table> inside a container that scrolls sideways. className and other props go on the <table>.

  Omit<ComponentProps<"table">, "color"> & { size?, scrollLabel? }

• TableCaption

  Part. The table's name. Put it first inside Table. It shows below the table, left-aligned.

  Omit<ComponentProps<"caption">, "color">

• TableHeader

  Part. The header row group. Its rows take no hover fill.

  Omit<ComponentProps<"thead">, "color">

• TableBody

  Part. The body row group.

  Omit<ComponentProps<"tbody">, "color">

• TableFooter

  Part. A footer row group for totals, on a muted fill.

  Omit<ComponentProps<"tfoot">, "color">

• TableRow

  Part. One row, with a bottom border and a muted fill on hover.

  Omit<ComponentProps<"tr">, "color">

• TableHead

  Part. A header cell, in muted-foreground. Does not wrap.

  Omit<ComponentProps<"th">, "color">

• TableCell

  Part. A data cell. Does not wrap. Pass className="whitespace-normal" to let it wrap.

  Omit<ComponentProps<"td">, "color">

• className

  Extra classes on any part. Later classes win, so className="py-4" on a cell replaces its padding.

  string

Accessibility

• Every part is the native element: <table>, <caption>, <thead>, <tbody>, <tfoot>, <tr>, <th>, and <td>. Screen readers can move by row and column and read each cell's header.
• TableCaption names the table. Screen readers read it when they reach the table.
• A <caption> must be the first child of its <table>, so put TableCaption first.
• scrollLabel makes the container a role="region" with that name and tabIndex=0, so keyboard users can Tab to it and scroll with the arrow keys. It shows the shared focus ring.
• Without scrollLabel, the container adds no tab stop and no name. Some browsers let keyboard users focus a container that scrolls. Do not count on it.
• Header cells use muted-foreground and body text uses the page's foreground. The theme tests hold both to 4.5:1 on the page and on cards.
• The row hover fill and the footer fill are muted at 50% over the page. Text on them sits between two pairs the theme tests hold to 4.5:1.

Examples

<Table>
  <TableCaption>Recent invoices</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">INV-001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="font-medium">INV-002</TableCell>
      <TableCell>Pending</TableCell>
      <TableCell className="text-right">$150.00</TableCell>
    </TableRow>
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell colSpan={2}>Total</TableCell>
      <TableCell className="text-right">$400.00</TableCell>
    </TableRow>
  </TableFooter>
</Table>

<Table scrollLabel="Team members" size="sm">
  <TableCaption>Team members</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Email</TableHead>
      <TableHead>Role</TableHead>
      <TableHead>Last active</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Ada Lovelace</TableCell>
      <TableCell>ada@example.com</TableCell>
      <TableCell>Owner</TableCell>
      <TableCell>2 minutes ago</TableCell>
    </TableRow>
  </TableBody>
</Table>

<Table>
  <TableCaption>Plan limits</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Plan</TableHead>
      <TableHead className="text-right">Seats</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableHead scope="row">Free</TableHead>
      <TableCell className="text-right">3</TableCell>
    </TableRow>
    <TableRow>
      <TableHead scope="row">Pro</TableHead>
      <TableCell className="text-right">25</TableCell>
    </TableRow>
  </TableBody>
</Table>

<Table>
  <TableCaption>Orders</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Order</TableHead>
      <TableHead>Customer</TableHead>
      <TableHead className="text-right">Total</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell colSpan={3} className="h-24 text-center text-muted-foreground">
        No orders yet.
      </TableCell>
    </TableRow>
  </TableBody>
</Table>