Table

The Table component displays tabular data cleanly with scrollable overflow handling.

Usage

import { Table } from "@/components/ui/table";

export function ExampleTable() {
  return (
    <Table.Root>
      <Table.Header>
        <Table.Row>
          <Table.Head>Name</Table.Head>
          <Table.Head>Email</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Alex</Table.Cell>
          <Table.Cell>alex@example.com</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table.Root>
  );
}

Preview

Invoice	Status	Method	Amount
INV-001	Paid	Credit Card	$250.00
INV-002	Pending	PayPal	$150.00

Custom Styling

Apply custom row hover background colors, border styles, or cell padding via className:

<Table.Row className="hover:bg-indigo-500/5 transition-colors border-b border-indigo-500/10">
  <Table.Cell className="font-semibold text-indigo-600 dark:text-indigo-400">Custom Cell</Table.Cell>
</Table.Row>

Styling & Class Names

Target internal table CSS slots for custom overrides:

Class Name	Element / Slot	Description
`.table`	Root table container	Overflow wrapper and HTML table container.
`.table__header`	Table head	Table header section.
`.table__body`	Table body	Table body rows container.
`.table__row`	Table row	Table row wrapper (`tr`).
`.table__head`	Column header cell	Header cell (`th`).
`.table__cell`	Data cell	Data cell (`td`).

Anatomy

<Table.Root>
  <Table.Caption />
  <Table.Header>
    <Table.Row>
      <Table.Head />
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell />
    </Table.Row>
  </Table.Body>
  <Table.Footer />
</Table.Root>