Table — SLAB

Full composition — interactive

Sort columns · filter pills · pagination

Campaigns8

Name	Status	Revenue	Date
SLAB Studio	active	$12,400	2025-06-12
Neon Drop	draft	—	2025-06-08
Black Tape	active	$3,200	2025-06-01
Signal	active	$28,900	2025-05-29
LOUD Type	draft	—	2025-05-15

1–5 of 8

Header variants

variant="lime" · variant="dark" · variant="paper"

Name	Status
SLAB Studio	Active
Neon Drop	Draft

Name	Status
Black Tape	Paused
Signal	Active

Name	Status
LOUD Type	Ended
Grid Override	Active

Special states

TableEmpty · TableSkeleton

Name	Status
▦No resultsClear filters to see all rows

Name	Status	Revenue

10 Exports

All sub-components — one reference each

Table shell
Outer border + shadow

Orders8

lime
dark
paper
—

Name
Row A
Row B
Row C

Name
Selected row
Normal row

Asc ↑	Desc ↓	Idle ↕
—	—	—

mono	muted	normal
$28,900	2025-06-12	SLAB Studio

11–20 of 50

Name	Status
▦No campaigns yetCreate your first campaign

Name	Status	Revenue

Props

Prop	Type	Default	Description
Table	Component	—	Outer shell — border, shadow, overflow. Hoists Toolbar + Pagination automatically.
TableToolbar	Component	—	title, count chip, search input, filter pills, CTA button.
TableHead	Component	—	<thead> with color variant: "lime" \| "dark" \| "paper".
TableBody	Component	—	<tbody> with optional zebra rows via striped prop.
TableRow	Component	—	<tr> with hover, selected, clickable states.
TableTh	Component	—	<th> with sort chevron. sortDir: "asc"\|"desc"\|null + onSort.
TableTd	Component	—	<td> with content helpers: mono, muted, dense, align.
TablePagination	Component	—	Smart page buttons with ellipsis collapse. total, page, perPage, onPage.
TableEmpty	Component	—	Dashed empty-state with glyph, message, hint, optional CTA action.
TableSkeleton	Component	—	Shimmer-loading skeleton rows. rows, cols props.

Usage

import { Table, TableToolbar, TableHead, TableBody,
         TableRow, TableTh, TableTd, TablePagination,
         TableEmpty, TableSkeleton } from "components/ui/Table";

<Table>
  <TableToolbar
    title="Campaigns" count={total} search
    filters={[{ label: "Active", value: "active" }]}
    action={{ label: "New", onClick: openNew }}
  />
  <TableHead variant="lime">
    <TableRow>
      <TableTh sortDir="asc" onSort={toggleSort}>Name</TableTh>
      <TableTh>Status</TableTh>
    </TableRow>
  </TableHead>
  {isLoading ? (
    <TableSkeleton rows={5} cols={3} />
  ) : rows.length === 0 ? (
    <TableEmpty message="No campaigns yet" />
  ) : (
    <TableBody striped>
      {rows.map(r => (
        <TableRow key={r.id} onClick={() => open(r)}>
          <TableTd>{r.name}</TableTd>
          <TableTd><Badge>{r.status}</Badge></TableTd>
        </TableRow>
      ))}
    </TableBody>
  )}
  <TablePagination total={total} page={page} onPage={setPage} />
</Table>