Table

A responsive table for tabular data. Built with logical alignment (text-start/ text-end) so columns flip correctly in RTL — toggle direction in the preview. For sorting, filtering, and pagination, see Data Table.

Basic

Headers and cells default to text-start. Align amounts with text-end.

Installation

CLI

npx @sonojs/ui@latest add table

Composition

structure

Table
├── TableCaption
├── TableHeader
│   └── TableRow
│       └── TableHead
├── TableBody
│   └── TableRow
│       └── TableCell
└── TableFooter
    └── TableRow
        └── TableCell

Usage

table.tsx

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

export function Example() {
  return (
    <Table>
      <TableCaption>A list of your recent invoices.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead className="w-[100px]">Invoice</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Method</TableHead>
          <TableHead className="text-end">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell className="font-medium">INV001</TableCell>
          <TableCell>Paid</TableCell>
          <TableCell>Credit Card</TableCell>
          <TableCell className="text-end">$250.00</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}

Direction

The scroll container receives dir from useDirection. Prefer text-end for amounts — never text-right.

direction.tsx

import { Table, TableHead, TableCell } from "@/components/ui/table"

// Defaults: text-start on heads/cells/caption; container gets dir from useDirection.
// Numeric / trailing columns: use text-end (not text-right).
<TableHead className="text-end">Amount</TableHead>
<TableCell className="text-end">$250.00</TableCell>

// Checkbox columns keep padding on the inline end:
// [&:has([role=checkbox])]:pe-0

Props

Prop	Type	Default	Description
className	string	—	On any part — merge Tailwind classes (e.g. `text-end` on amount cells).
colSpan	number	—	On `TableCell` / `TableHead` — span columns.