Table

React Table components are used to display structured data in rows and columns. They are commonly used for lists, reports, dashboards, admin panels, and data-heavy interfaces where content needs to be easy to scan and compare.

This Table component is built with React and styled using Tailwind CSS. It provides composable table parts, responsive horizontal scrolling, and flexible styling while keeping native table semantics.

Installation

Anatomy

Import the table parts and compose them to build the layout.

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

Wraps the entire table and manages layout and overflow behavior. Extends native 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 native table elements (table, thead, tbody, tr, th, td)
• Header cells use <th> for proper screen reader context
• Left-aligned text for better readability
• Horizontal scroll container for responsive behavior
• Supports all standard table HTML attributes

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 Badge, Button, Avatar, and Dropdown components inside cells