Table

Rows and columns of structured data. The wrapper scrolls rather than the page, so a wide table never forces horizontal scroll on the whole document.

src/components/ui/table.tsx

About

From the component's own source, where it was written.

Rows and columns of structured data.

The wrapper scrolls rather than the page, so a wide table never forces horizontal scroll on the whole document — the single most common table bug.

Install

npx astralyx-ui add table

Usage

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table'

<Table>
  <TableHeader>
    <TableRow><TableHead>Invoice</TableHead></TableRow>
  </TableHeader>
  <TableBody>
    <TableRow><TableCell>INV-001</TableCell></TableRow>
  </TableBody>
</Table>

Composer

Change the props and the source below follows.

Invoice	Customer	Status	Amount
INV-001	Acme Corp	paid	$1,200.00
INV-002	Globex	pending	$450.00
INV-003	Initech	failed	$980.00
INV-004	Umbrella	paid	$2,400.00
Total			$5,030.00

Props

TableCaptionTableFooter

tsx

<Table>
  <TableHeader>…</TableHeader>
  <TableBody>…</TableBody>
  <TableFooter>…</TableFooter>
</Table>

Examples

With a footer

tsx

<TableFooter>…</TableFooter>

With a caption

tsx

<TableCaption>Invoices…</TableCaption>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Table`

Rows and columns of structured data.

Extends ComponentProps<'table'>.

Prop	Type	Default	Description
containerClassName	string	—	Styles the scrolling wrapper; className styles the <table> itself.

`TableHeader`

Map to thead, tbody and tfoot. The footer is tinted and divided.

Extends ComponentProps<'thead'>.

`TableBody`

Map to thead, tbody and tfoot. The footer is tinted and divided.

Extends ComponentProps<'tbody'>.

`TableFooter`

Map to thead, tbody and tfoot. The footer is tinted and divided.

Extends ComponentProps<'tfoot'>.

`TableRow`

Extends ComponentProps<'tr'>.

`TableHead`

Extends ComponentProps<'th'>.

`TableCell`

Extends ComponentProps<'td'>.

`TableCaption`

Rendered below the table, per caption-side.

Extends ComponentProps<'caption'>.

Behaviour

Topic	Detail	Description
TableRow data-state	"selected"	Marks a row as selected, which tints its background.