Table

Columnar data that shares the same row shape as Lists.

Default

Headers sit in the neutral-100 well and rows in a white panel with a 1px neutral-200 stroke. Rows are 44px with a neutral-50 hover.

Call ID	Agent	Duration	Status

CALL-4506	Nova Sales Assistant	1m 05s	In progress
CALL-4507	Zephyr Lead Qualifier	2m 42s	Completed
CALL-4508	Pulse Support Agent	4m 18s	Completed
CALL-4509	Orbit Retention Bot	0m 55s	Failed

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@smallest-inc/ui";

const calls = [
  { id: "CALL-4506", agent: "Nova Sales Assistant", duration: "1m 05s", status: "In progress" },
  { id: "CALL-4507", agent: "Zephyr Lead Qualifier", duration: "2m 42s", status: "Completed" },
  { id: "CALL-4508", agent: "Pulse Support Agent", duration: "4m 18s", status: "Completed" },
  { id: "CALL-4509", agent: "Orbit Retention Bot", duration: "0m 55s", status: "Failed" },
];

export default function TableDefault() {
  return (
    <div className="w-full">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead className="w-36">Call ID</TableHead>
            <TableHead>Agent</TableHead>
            <TableHead className="w-32">Duration</TableHead>
            <TableHead className="w-36">Status</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {calls.map((call) => (
            <TableRow key={call.id}>
              <TableCell className="w-36">{call.id}</TableCell>
              <TableCell>{call.agent}</TableCell>
              <TableCell className="w-32 tabular-nums">{call.duration}</TableCell>
              <TableCell className="w-36">{call.status}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

Pinned columns

Set pin="start" or pin="end" on a column's head and cells to keep it in place while the middle scrolls. When the middle overflows, scroll buttons and edge fades appear in the header.

Call ID

CALL-4506
CALL-4507
CALL-4508
CALL-4509

Agent	From	To	Duration	Messages	Status	Latency

Nova Sales Assistant	+31 6 2604 3466	+1 415 555 0198	1m 05s	3	In progress	0.03s
Zephyr Lead Qualifier	+31 6 6772 4958	+1 415 555 0102	2m 42s	5	Completed	0.22s
Pulse Support Agent	+91 72249 83464	+1 212 555 0147	4m 18s	12	Completed	0.09s
Orbit Retention Bot	+91 96909 87160	+44 20 7946 0958	0m 55s	6	Failed	0.31s

import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  MoreVerticalIcon,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@smallest-inc/ui";

const calls = [
  {
    id: "CALL-4506",
    agent: "Nova Sales Assistant",
    from: "+31 6 2604 3466",
    to: "+1 415 555 0198",
    duration: "1m 05s",
    messages: 3,
    status: "In progress",
    latency: "0.03s",
  },
  {
    id: "CALL-4507",
    agent: "Zephyr Lead Qualifier",
    from: "+31 6 6772 4958",
    to: "+1 415 555 0102",
    duration: "2m 42s",
    messages: 5,
    status: "Completed",
    latency: "0.22s",
  },
  {
    id: "CALL-4508",
    agent: "Pulse Support Agent",
    from: "+91 72249 83464",
    to: "+1 212 555 0147",
    duration: "4m 18s",
    messages: 12,
    status: "Completed",
    latency: "0.09s",
  },
  {
    id: "CALL-4509",
    agent: "Orbit Retention Bot",
    from: "+91 96909 87160",
    to: "+44 20 7946 0958",
    duration: "0m 55s",
    messages: 6,
    status: "Failed",
    latency: "0.31s",
  },
];

const statusClassName: Record<string, string> = {
  Completed: "text-positive-fg",
  Failed: "text-danger-fg",
  "In progress": "text-warning-fg",
};

export default function TablePinned() {
  return (
    <div className="w-full">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead pin="start" className="w-36">
              Call ID
            </TableHead>
            <TableHead className="w-56">Agent</TableHead>
            <TableHead className="w-44">From</TableHead>
            <TableHead className="w-44">To</TableHead>
            <TableHead className="w-32">Duration</TableHead>
            <TableHead className="w-32">Messages</TableHead>
            <TableHead className="w-36">Status</TableHead>
            <TableHead className="w-32">Latency</TableHead>
            <TableHead pin="end" className="w-12 px-2" />
          </TableRow>
        </TableHeader>
        <TableBody>
          {calls.map((call) => (
            <TableRow key={call.id}>
              <TableCell pin="start" className="w-36">
                {call.id}
              </TableCell>
              <TableCell className="w-56">{call.agent}</TableCell>
              <TableCell className="w-44">{call.from}</TableCell>
              <TableCell className="w-44">{call.to}</TableCell>
              <TableCell className="w-32 tabular-nums">{call.duration}</TableCell>
              <TableCell className="w-32 tabular-nums">{call.messages}</TableCell>
              <TableCell className={`w-36 ${statusClassName[call.status]}`}>{call.status}</TableCell>
              <TableCell className="w-32 tabular-nums">{call.latency}</TableCell>
              <TableCell pin="end" className="w-12 px-2 py-0">
                <DropdownMenu>
                  <DropdownMenuTrigger
                    render={<Button iconOnly variant="transparent" size="sm" aria-label={`More actions for ${call.id}`} />}
                  >
                    <MoreVerticalIcon />
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="w-44">
                    <DropdownMenuItem>View transcript</DropdownMenuItem>
                    <DropdownMenuItem>Copy call ID</DropdownMenuItem>
                    <DropdownMenuItem variant="danger">Delete recording</DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

Column dividers

lines="all" divides every column, lines="start" only the first, and lines="end" only the last. Dividers are body-only, so the header stays clean.

Phone number	Provider	Agent

+1 (415) 555-0198	Twilio	Nova Sales Assistant
+1 (212) 555-0147	Plivo	Pulse Support Agent

Phone number	Provider	Agent

+1 (415) 555-0198	Twilio	Nova Sales Assistant
+1 (212) 555-0147	Plivo	Pulse Support Agent

Phone number	Provider	Agent

+1 (415) 555-0198	Twilio	Nova Sales Assistant
+1 (212) 555-0147	Plivo	Pulse Support Agent

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
  type TableLines,
} from "@smallest-inc/ui";

const numbers = [
  { number: "+1 (415) 555-0198", provider: "Twilio", agent: "Nova Sales Assistant" },
  { number: "+1 (212) 555-0147", provider: "Plivo", agent: "Pulse Support Agent" },
];

const variants: TableLines[] = ["all", "start", "end"];

export default function TableLinesExample() {
  return (
    <div className="flex w-full flex-col gap-6">
      {variants.map((lines) => (
        <Table key={lines} lines={lines}>
          <TableHeader>
            <TableRow>
              <TableHead className="w-48">Phone number</TableHead>
              <TableHead className="w-36">Provider</TableHead>
              <TableHead>Agent</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {numbers.map((row) => (
              <TableRow key={row.number}>
                <TableCell className="w-48">{row.number}</TableCell>
                <TableCell className="w-36">{row.provider}</TableCell>
                <TableCell>{row.agent}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      ))}
    </div>
  );
}

Entity cells

Put an Entity in a cell with variant="agent" when a row needs identity and supporting context. The cell wraps instead of truncating.

Agent	Calls	Success rate

Nova Sales Assistant Inbound sales	1,450	92%
Pulse Support Agent Customer support	3,210	88%
Atlas Onboarding Guide Customer onboarding	640	95%

import {
  Entity,
  EntityContent,
  EntityMedia,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@smallest-inc/ui";

const agents = [
  { name: "Nova Sales Assistant", purpose: "Inbound sales", calls: 1450, success: "92%" },
  { name: "Pulse Support Agent", purpose: "Customer support", calls: 3210, success: "88%" },
  { name: "Atlas Onboarding Guide", purpose: "Customer onboarding", calls: 640, success: "95%" },
];

export default function TableEntityCells() {
  return (
    <div className="w-full">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Agent</TableHead>
            <TableHead className="w-32">Calls</TableHead>
            <TableHead className="w-32">Success rate</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {agents.map((agent) => (
            <TableRow key={agent.name}>
              <TableCell variant="agent">
                <Entity>
                  <EntityMedia />
                  <EntityContent title={agent.name} description={agent.purpose} />
                </Entity>
              </TableCell>
              <TableCell className="w-32 tabular-nums">{agent.calls.toLocaleString("en-US")}</TableCell>
              <TableCell className="w-32 tabular-nums">{agent.success}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

Interactive cells

Compact controls such as Switch size="sm" fit the standard row height without adding vertical space.

Phone number	Provider	Agent linked	Enabled

+1 (415) 555-0198	Twilio	Nova Sales Assistant
+1 (212) 555-0147	Plivo	Pulse Support Agent
+44 20 7946 0958	Twilio	Orbit Retention Bot

import {
  Switch,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@smallest-inc/ui";

const numbers = [
  { number: "+1 (415) 555-0198", provider: "Twilio", agent: "Nova Sales Assistant", enabled: true },
  { number: "+1 (212) 555-0147", provider: "Plivo", agent: "Pulse Support Agent", enabled: true },
  { number: "+44 20 7946 0958", provider: "Twilio", agent: "Orbit Retention Bot", enabled: false },
];

export default function TableInteractiveCells() {
  return (
    <div className="w-full">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead className="w-48">Phone number</TableHead>
            <TableHead className="w-36">Provider</TableHead>
            <TableHead>Agent linked</TableHead>
            <TableHead className="w-28">Enabled</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {numbers.map((row) => (
            <TableRow key={row.number}>
              <TableCell className="w-48">{row.number}</TableCell>
              <TableCell className="w-36">{row.provider}</TableCell>
              <TableCell>{row.agent}</TableCell>
              <TableCell className="w-28">
                <Switch size="sm" defaultChecked={row.enabled} aria-label={`Enable ${row.number}`} />
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

Footer

TableFooter holds totals on a neutral-100 fill below the last row.

Agent	Minutes	Cost

Nova Sales Assistant	1,240	$62.00
Pulse Support Agent	2,875	$143.75
Orbit Retention Bot	410	$20.50
Total	4,525	$226.25

import {
  Table,
  TableBody,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@smallest-inc/ui";

const usage = [
  { agent: "Nova Sales Assistant", minutes: 1240, cost: "$62.00" },
  { agent: "Pulse Support Agent", minutes: 2875, cost: "$143.75" },
  { agent: "Orbit Retention Bot", minutes: 410, cost: "$20.50" },
];

export default function TableWithFooter() {
  return (
    <div className="w-full">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Agent</TableHead>
            <TableHead className="w-36">Minutes</TableHead>
            <TableHead className="w-36">Cost</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {usage.map((row) => (
            <TableRow key={row.agent}>
              <TableCell>{row.agent}</TableCell>
              <TableCell className="w-36 tabular-nums">{row.minutes.toLocaleString("en-US")}</TableCell>
              <TableCell className="w-36 tabular-nums">{row.cost}</TableCell>
            </TableRow>
          ))}
        </TableBody>
        <TableFooter>
          <TableRow>
            <TableCell className="font-medium">Total</TableCell>
            <TableCell className="w-36 font-medium tabular-nums">4,525</TableCell>
            <TableCell className="w-36 font-medium tabular-nums">$226.25</TableCell>
          </TableRow>
        </TableFooter>
      </Table>
    </div>
  );
}

Best practices

When to use

Use for records compared across named columns: call logs, phone numbers, usage.
Use List or Entity when rows are mostly descriptive or have varied structure.

Behavior

Pin only the identifier (pin="start") and the row actions (pin="end"). The middle scrolls, and scroll buttons and edge fades appear when it overflows.
Set pin on both the TableHead and every TableCell in that column.
Give columns fixed widths (w-32, w-44) and let one column flex, so pinned panes and headers stay aligned.
Use lines="all" for dense numeric data, lines="start" or lines="end" to separate an identifier or action column. Dividers are body-only.
Use variant="agent" on cells that hold a two-line Entity, so they wrap instead of truncating.
Use Switch size="sm" and xs/sm icon buttons in cells so rows stay 44px.
Put totals in TableFooter. Provide empty, loading (Skeleton rows) and narrow-width states.

Content

Header labels are sentence case nouns: "Call ID", "Agent linked". Use tabular-nums for durations, counts and money.
Colour status text with positive, warning and danger tokens only when the label says the same thing.

Accessibility

Name row action menus with the row identifier: "More actions for CALL-4506".
Make sort state visible and announced when a column sorts.

PreviousSwitch NextTabs