Table - Sabo

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.

​When to use

​Usage

​Key parts

​Styling tip

​Accessibility

When to use

Usage

Key parts

Styling tip

Accessibility