Data

Table

Structured tabular data. Compose with TableHeader, TableBody, TableRow, TableCell.

Preview

import { Badge } from '@brika/clay/components/badge';
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@brika/clay/components/table';
const members = [
  { name: 'Alicia Reyes', email: 'alicia@brika.io', role: 'Admin', status: 'Active' },
  { name: 'Tom Hargreaves', email: 'tom@brika.io', role: 'Developer', status: 'Active' },
  { name: 'Yuki Tanaka', email: 'yuki@brika.io', role: 'Designer', status: 'Inactive' },
  { name: 'Dmitri Volkov', email: 'dmitri@brika.io', role: 'Developer', status: 'Active' },
];

/** Full workspace members table with name, email, role, and status columns. */
export default function TableDefaultDemo() {
  return (
    <Table>
      <TableCaption>Workspace members</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Role</TableHead>
          <TableHead>Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {members.map((m) => (
          <TableRow key={m.email}>
            <TableCell className="font-medium">{m.name}</TableCell>
            <TableCell className="text-muted-foreground">{m.email}</TableCell>
            <TableCell>{m.role}</TableCell>
            <TableCell>
              <Badge variant={m.status === 'Active' ? 'default' : 'outline'}>{m.status}</Badge>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

01 Installation

Install

Pull Table from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { Table } from "@brika/clay";

tsxGranular1 line

import { Table } from "@brika/clay/components/table";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxTable.tsx45 lines

import { Badge } from '@brika/clay/components/badge';
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@brika/clay/components/table';
const members = [
  { name: 'Alicia Reyes', email: 'alicia@brika.io', role: 'Admin', status: 'Active' },
  { name: 'Tom Hargreaves', email: 'tom@brika.io', role: 'Developer', status: 'Active' },
  { name: 'Yuki Tanaka', email: 'yuki@brika.io', role: 'Designer', status: 'Inactive' },
  { name: 'Dmitri Volkov', email: 'dmitri@brika.io', role: 'Developer', status: 'Active' },
];

/** Full workspace members table with name, email, role, and status columns. */
export default function TableDefaultDemo() {
  return (
    <Table>
      <TableCaption>Workspace members</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Role</TableHead>
          <TableHead>Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {members.map((m) => (
          <TableRow key={m.email}>
            <TableCell className="font-medium">{m.name}</TableCell>
            <TableCell className="text-muted-foreground">{m.email}</TableCell>
            <TableCell>{m.role}</TableCell>
            <TableCell>
              <Badge variant={m.status === 'Active' ? 'default' : 'outline'}>{m.status}</Badge>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

03 Examples

Table, every way

Action

Actions column with Edit and Delete icon buttons per row.

GitHub

import { Button } from '@brika/clay/components/button';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@brika/clay/components/table';
import { Pencil, Trash2 } from 'lucide-react';
const members = [
  { name: 'Alicia Reyes', email: 'alicia@brika.io', role: 'Admin', status: 'Active' },
  { name: 'Tom Hargreaves', email: 'tom@brika.io', role: 'Developer', status: 'Active' },
  { name: 'Yuki Tanaka', email: 'yuki@brika.io', role: 'Designer', status: 'Inactive' },
  { name: 'Dmitri Volkov', email: 'dmitri@brika.io', role: 'Developer', status: 'Active' },
];

/** Actions column with Edit and Delete icon buttons per row. */
export default function TableActionDemo() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Role</TableHead>
          <TableHead className="w-20 text-right">Actions</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {members.map((m) => (
          <TableRow key={m.email}>
            <TableCell className="font-medium">{m.name}</TableCell>
            <TableCell>{m.role}</TableCell>
            <TableCell className="text-right">
              <div className="flex items-center justify-end gap-1">
                <Button size="icon-sm" variant="ghost" aria-label={`Edit ${m.name}`}>
                  <Pencil className="size-3.5" />
                </Button>
                <Button
                  size="icon-sm"
                  variant="ghost"
                  className="text-destructive hover:text-destructive"
                  aria-label={`Delete ${m.name}`}
                >
                  <Trash2 className="size-3.5" />
                </Button>
              </div>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

Compact

Dense table using `text-xs` and reduced cell padding, useful for data-heavy views.

GitHub

import {
  Table,
  TableBody,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from '@brika/clay/components/table';
const invoices = [
  { id: 'INV-001', date: '2024-11-01', amount: '$1,200.00' },
  { id: 'INV-002', date: '2024-11-15', amount: '$450.00' },
  { id: 'INV-003', date: '2024-12-01', amount: '$820.00' },
];

/** Dense table using `text-xs` and reduced cell padding, useful for data-heavy views. */
export default function TableCompactDemo() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead className="h-8 text-xs">Invoice</TableHead>
          <TableHead className="h-8 text-xs">Date</TableHead>
          <TableHead className="h-8 text-right text-xs">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {invoices.map((inv) => (
          <TableRow key={inv.id}>
            <TableCell className="py-1 font-mono text-xs">{inv.id}</TableCell>
            <TableCell className="py-1 text-xs text-muted-foreground">{inv.date}</TableCell>
            <TableCell className="py-1 text-right text-xs font-medium">{inv.amount}</TableCell>
          </TableRow>
        ))}
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell colSpan={2} className="text-xs">
            Total
          </TableCell>
          <TableCell className="text-right text-xs">$2,470.00</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  );
}

Striped

Striped rows using `odd:bg-muted/40` on TableRow, no extra wrapper needed.

GitHub

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@brika/clay/components/table';
const members = [
  { name: 'Alicia Reyes', email: 'alicia@brika.io', role: 'Admin', status: 'Active' },
  { name: 'Tom Hargreaves', email: 'tom@brika.io', role: 'Developer', status: 'Active' },
  { name: 'Yuki Tanaka', email: 'yuki@brika.io', role: 'Designer', status: 'Inactive' },
  { name: 'Dmitri Volkov', email: 'dmitri@brika.io', role: 'Developer', status: 'Active' },
];

/** Striped rows using `odd:bg-muted/40` on TableRow, no extra wrapper needed. */
export default function TableStripedDemo() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Role</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {members.map((m) => (
          <TableRow key={m.email} className="odd:bg-muted/40 hover:bg-muted/60">
            <TableCell className="font-medium">{m.name}</TableCell>
            <TableCell className="text-muted-foreground">{m.email}</TableCell>
            <TableCell>{m.role}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

04 Accessibility

Accessibility

Use <TableCaption> to describe the table, it becomes the accessible name via aria-labelledby.
Sortable column headers should carry aria-sort="ascending" or "descending".
Action buttons in cells require aria-label that includes the row context (e.g. "Edit Alicia Reyes").
The table responds to standard AT table-navigation keys (e.g. Ctrl+Alt+arrows in screen readers).

05 Tokens 4 theme-overridable

Theme tokens

Every CSS variable Table reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Table without touching component code.

Table tokens

4 tokens

ColorFill, border, and text colors.4

--table-header-bgcolorvar(--muted)
components.table.headerBg
Background for the table footer (and any consumer-defined header rows).
--table-row-hover-bgcolorvar(--muted)
components.table.rowHoverBg
Background for hovered and selected rows; the hover state applies it at 50% opacity.
--table-head-colorcolorvar(--foreground)
components.table.headColor
Foreground color of `<TableHead>` cells.
--table-caption-colorcolorvar(--muted-foreground)
components.table.captionColor
Foreground color of the `<TableCaption>` rendered beneath the table.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.table, the names are camelCase versions of the variable suffix.

jsonmy-theme.json12 lines

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "table": {
      "headerBg": "var(--muted)"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-table-…) — see the chips on each token row.

06 API reference

API reference

Props specific to Table. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.