Skip to main content
Table component preview (light)
  • Location: sabo/src/components/ui/table.tsx

​
When to use

  • Present tabular data with headers and rows.
  • Use for datasets that benefit from columnar comparison.

​
Usage

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

export function Example() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Role</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Jane</TableCell>
          <TableCell>Admin</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

​
Key parts

​
Table
Responsive wrapper with horizontal scroll for overflow.
​
TableHeader/TableBody/TableRow/TableHead/TableCell
Semantic wrappers for accessible table markup.
​
TableFooter
Optional footer row group.
​
TableCaption
Optional table caption for summaries/notes.

​
Styling tip

The Table wrapper provides horizontal scroll for overflow. Keep column count reasonable. 
<div className="rounded-md border">
  <Table>...</Table>
</div>

​
Accessibility

  • Use TableHeader for column headers and TableBody for data rows.
  • Screen readers navigate by column/row; provide clear, descriptive headers.
  • For sortable tables, indicate sort direction with aria-sort.