Table

Playground

Installation

pnpm add @tessinaui/ui

Usage

import {
  TableRoot,
  TableHeader,
  TableBody,
  TableFooter,
  TableRow,
  TableHead,
  TableCell,
  TableCaption,
  TableEmpty,
  TableCellAvatar,
  TableCellAmount,
  TableCellStatus,
  TableCellActions,
} from "@tessinaui/ui";

<TableRoot variant="lined" hoverable>
  <TableHeader>
    <TableRow hoverable={false}>
      <TableHead sortable sortDirection="asc" onSort={handleSort("name")}>User</TableHead>
      <TableHead>Role</TableHead>
      <TableHead>Status</TableHead>
      <TableHead numeric>Amount</TableHead>
      <TableHead align="end" />
    </TableRow>
  </TableHeader>

  <TableBody>
    {users.map((u) => (
      <TableRow key={u.id}>
        <TableCell>
          <TableCellAvatar
            avatar={<Avatar size="sm" initials={initialsOf(u.name)} />}
            name={u.name}
            secondary={u.email}
          />
        </TableCell>
        <TableCell>{u.role}</TableCell>
        <TableCell>
          <TableCellStatus intent="success" label="Active" />
        </TableCell>
        <TableCell numeric>
          <TableCellAmount currency="$" amount={u.amount.toFixed(2)} />
        </TableCell>
        <TableCell align="end">
          <TableCellActions>
            <IconButton variant="ghost" size="xs" icon={<MoreHorizontal />} aria-label="Actions" />
          </TableCellActions>
        </TableCell>
      </TableRow>
    ))}
  </TableBody>
</TableRoot>

Examples

Default

A team table composing avatar, status, currency, and action cell helpers.

Variants

Four visual treatments — lined, striped, bordered, and borderless.

Sizes

Five density steps from xs to xl scale cell padding and text size.

Row states

Rows can be selected, disabled, or destructive.

Sortable columns

Sortable headers cycle through none → asc → desc and re-sort the rows.

Empty & loading

TableEmpty fills the body when there's no data; TableSkeleton covers the loading state.

When to use

Table is the workhorse for any structured tabular data — users, transactions, orders, audit logs, settings rows, etc. It's a primitive set: bring your own data fetching, pagination, and selection state, and Tessina handles the visual layer plus sorting indicators, sticky header, and the cell patterns that show up everywhere.

For a turnkey component with built-in filtering / pagination / selection, layer TanStack Table on top of these primitives — the styling will carry through unchanged.

API Reference

TableRoot props

TableContainer props

A standalone scroll container — useful if you need to wrap a table you didn't build with TableRoot.

TableHeader / TableBody / TableFooter

Semantic <thead> / <tbody> / <tfoot> wrappers. Header gets the muted background; footer gets the same styling for totals rows.

TableRow props

TableHead props

Sets aria-sort automatically when sortable is true.

TableCell props

Same align, numeric, sticky, width props as TableHead, plus truncate for ellipsis overflow.

TableEmpty props

Renders a single row with one cell that spans the table.

Cell helpers

These compose inside TableCell and cover the patterns that show up in nearly every product table.

TableCellAvatar

<TableCell>
  <TableCellAvatar
    avatar={<Avatar src={user.photo} initials={initialsOf(user.name)} />}
    name={user.name}
    secondary={user.email}
  />
</TableCell>

TableCellAmount

Right-aligns a currency amount with optional comparison delta (tinted by intent).

<TableCell numeric>
  <TableCellAmount
    currency="$"
    amount="1,240.50"
    delta="+12.4%"
    deltaIntent="success"
  />
</TableCell>

TableCellStatus

Dot + label, in 6 intents (neutral, primary, error, warning, success, info).

<TableCell>
  <TableCellStatus intent="success" label="Active" />
</TableCell>

TableCellActions

A trailing-edge container for icon-button actions.

<TableCell align="end">
  <TableCellActions>
    <IconButton variant="ghost" size="xs" icon={<Pencil />} aria-label="Edit" />
    <IconButton variant="ghost" size="xs" icon={<Trash />} aria-label="Delete" />
  </TableCellActions>
</TableCell>

TableCellText

Two-line cell with primary + muted secondary.

<TableCell>
  <TableCellText primary="Wire transfer" secondary="ACH · 2 days" />
</TableCell>

Notes

• The <table> element renders inside a TableContainer by default, which provides the rounded card chrome, intent border, and horizontal scroll for narrow viewports. Pass withContainer={false} if you want to nest the table inside your own container (e.g. a Card).
• aria-sort="ascending" | "descending" | "none" is set automatically on sortable headers.
• For huge datasets, virtualize the body with TanStack Virtual or a similar library — the primitives don't impose any virtualization but compose naturally with one.
• For RTL: alignment, sortable indicators, and sticky-column side all flip via the dir prop. Numbers and currency stay LTR-formatted (which is the typographic norm even in Arabic-script copy).