Table

Overview

The Table component provides styled native table primitives. The table itself stays transparent and structural, while headers, footers, selected rows, and pinned cells derive their surfaces and borders from the current surface context.

Usage

import {
  Table,
  TableBody,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@tilt-legal/cubitt-components/table";

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

Examples

Basic

A simple table with a header, body, and footer.

import {
  Table,
  TableBody,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@tilt-legal/cubitt-components/table";

export default function Component() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead className="w-[100px]">Invoice</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Method</TableHead>
          <TableHead className="text-right">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell className="font-medium">INV001</TableCell>
          <TableCell>Paid</TableCell>
          <TableCell>Credit Card</TableCell>
          <TableCell className="text-right">$250.00</TableCell>
        </TableRow>
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell colSpan={3}>Total</TableCell>
          <TableCell className="text-right">$250.00</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  );
}

Selected Rows

Use data-state="selected" on a row or cell when the row is selected.

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@tilt-legal/cubitt-components/table";

export default function Component() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Matter</TableHead>
          <TableHead>Owner</TableHead>
          <TableHead>Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow data-state="selected">
          <TableCell className="font-medium">Hale acquisition</TableCell>
          <TableCell>Marcus Lee</TableCell>
          <TableCell>Selected</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

Pinned Column

Pinned cells use data-pinned and data-last-col so their background and separator border stay opaque while horizontally scrolling.

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@tilt-legal/cubitt-components/table";

export default function Component() {
  return (
    <Table className="min-w-[760px] table-fixed">
      <TableHeader>
        <TableRow>
          <TableHead
            className="sticky left-0 z-10 w-40"
            data-last-col="left"
            data-pinned="left"
          >
            Matter
          </TableHead>
          <TableHead className="w-36">Phase</TableHead>
          <TableHead className="w-44">Owner</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell
            className="sticky left-0 z-10 w-40 font-medium"
            data-last-col="left"
            data-pinned="left"
          >
            Atlas Holding
          </TableCell>
          <TableCell className="w-36">Discovery</TableCell>
          <TableCell className="w-44">Damian Petrov</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

API Reference

Components

Component	Element	Description
`Table`	`table`	Wraps a native table in a horizontal overflow container.
`TableHeader`	`thead`	Header row group.
`TableBody`	`tbody`	Body row group with spacing from the header.
`TableFooter`	`tfoot`	Footer row group with a contextual surface and border.
`TableRow`	`tr`	Table row. Supports `data-state="selected"`.
`TableHead`	`th`	Header cell with contextual surface and border.
`TableCell`	`td`	Body or footer cell. Supports `data-state="selected"` and `data-pinned`.
`TableCaption`	`caption`	Caption text for the table.

Table

On this page