Table

unreleasedstable

Presentational native table anatomy for readable data.

A list of current projects.
Project	Status	Team	Budget
Website Redesign	Paid	Frontend Team	$12,500
Mobile App	Unpaid	Mobile Team	$8,750
API Integration	Pending	Backend Team	$5,200
Database Migration	Paid	DevOps Team	$3,800
User Dashboard	Paid	UX Team	$7,200
Security Audit	Failed	Security Team	$2,100
Total Budget			$39,550

Usage

tsxUsage

import {
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
 
export function Component() {
  return (
    <TableContainer>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Item</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow>
            <TableCell>Registry source</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </TableContainer>
  );
}

API Reference

TableContainer

Overflow wrapper that carries table container styling and CardFrame clipping hooks.

Prop	Type	Default
`class`	`string`	-

<TableContainer>
  <Table>
    <TableHeader>...</TableHeader>
    <TableBody>...</TableBody>
  </Table>
</TableContainer>

Table

Native table root with Keystone density, caption, and tabular-number styling.

Prop	Type	Default
`class`	`string`	-

<Table>
  <TableCaption>Caption</TableCaption>
  <TableHeader>...</TableHeader>
  <TableBody>...</TableBody>
</Table>

TableHeader

Native header section containing column headers.

Prop	Type	Default
`class`	`string`	-

<TableHeader>
  <TableRow>
    <TableHead scope="col">Header</TableHead>
  </TableRow>
</TableHeader>

TableBody

Native body section containing table rows and data cells.

Prop	Type	Default
`class`	`string`	-

<TableBody>
  <TableRow>
    <TableCell>Cell</TableCell>
  </TableRow>
</TableBody>

TableFooter

Native footer section for totals, summaries, or aggregate rows.

Prop	Type	Default
`class`	`string`	-

<TableFooter>
  <TableRow>
    <TableCell colSpan={3}>Total</TableCell>
    <TableCell class="text-right">$39,550</TableCell>
  </TableRow>
</TableFooter>

TableRow

Native row part with hover and selected-state styling hooks.

Prop	Type	Default
`class`	`string`	-
`data-state`	`"selected" \| string`	-
`data-selected`	`string`	-

<TableRow data-state="selected">
  <TableCell>Selected row</TableCell>
</TableRow>

TableHead

Native header cell for column labels.

Prop	Type	Default
`class`	`string`	-
`scope`	`"col" \| "row" \| "colgroup" \| "rowgroup"`	-

<TableHead class="text-right" scope="col">
  Budget
</TableHead>

TableCell

Native data cell for row values.

Prop	Type	Default
`class`	`string`	-
`colSpan`	`number`	-

<TableCell class="text-right font-medium tabular-nums">
  $12,500
</TableCell>

TableCaption

Native caption part for readable table summaries.

Prop	Type	Default
`class`	`string`	-

<TableCaption>A list of current projects.</TableCaption>

Examples

Basic Table

A list of current projects.
Project	Status	Team	Budget
Website Redesign	Paid	Frontend Team	$12,500
Mobile App	Unpaid	Mobile Team	$8,750
API Integration	Pending	Backend Team	$5,200
Database Migration	Paid	DevOps Team	$3,800
User Dashboard	Paid	UX Team	$7,200
Security Audit	Failed	Security Team	$2,100
Total Budget			$39,550

CardFrame Table

Project Budget

CardFrame keeps the table clipped inside a framed surface.

Project	Status	Team	Budget
Website Redesign	Paid	Frontend Team	$12,500
Mobile App	Unpaid	Mobile Team	$8,750
API Integration	Pending	Backend Team	$5,200
Database Migration	Paid	DevOps Team	$3,800
User Dashboard	Paid	UX Team	$7,200
Security Audit	Failed	Security Team	$2,100