Table

Display structured data in rows and columns with customizable styling and layout options.

Installation

Anatomy

Import the components and piece them together.

import {
  TableRoot,
  TableHeader,
  TableBody,
  TableHead,
  TableRow,
  TableCell
} from "@/registry/core/table";

export default () => (
  <TableRoot>
    <TableHeader>
      <TableRow>
        <TableHead />
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableCell />
      </TableRow>
    </TableBody>
  </TableRoot>
);

API Reference

TableRoot

The root table container with horizontal scroll support. Extends table element props.

TableHeader

The table header container. Extends thead element props.

TableBody

The table body container. Extends tbody element props.

TableHead

A table header cell. Extends th element props.

TableRow

A table row. Extends tr element props.

TableCell

A table data cell. Extends td element props.

Accessibility

• Uses semantic HTML table elements
• Proper heading structure with <thead> and <th> elements
• Left-aligned text for better readability
• Horizontal scroll container for responsive behavior
• All standard table HTML attributes are supported

Notes

• The root component includes a scroll container for horizontal overflow
• Border-separate layout with custom spacing for clean visual separation
• Header cells have smaller text size (12px) for hierarchy
• All rows except the last have bottom borders
• Full bleed mode removes rounded corners and side borders for edge-to-edge layouts
• Works well with other components like Badge and Button for rich table content