Table

A semantic HTML table with Shelf styles.

Recent invoices
Invoice	Customer	Status	Amount
INV-1042	Acme Inc.	Paid	$1,200.00
INV-1043	Globex	Overdue	$860.00
INV-1044	Initech	Draft	$2,450.00

When to use

Use when: Data people compare across rows and columns.
Avoid when: Content is a list of items with one or two attributes; use a list.

Installation

bunx shelf add table

The source lands in src/components/ui/table.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Table from "@/components/ui/table";

<Table.Root>
  <Table.Caption>Recent invoices</Table.Caption>
  <Table.Header>
    <Table.Row><Table.Head>Customer</Table.Head><Table.Head>Amount</Table.Head></Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row><Table.Cell>Acme Inc.</Table.Cell><Table.Cell>$1,200.00</Table.Cell></Table.Row>
  </Table.Body>
</Table.Root>

Built on

Packages: @stylexjs/stylex
Shelf items: foundations, utils
Figma: In progress. See Designers and Figma.