Table

Tables display structured data in rows and columns. Use them for lists, records, comparisons, or any scannable tabular content.

Interactive preview

A table with sample data showcasing badges and hover states. Try different header variants—text color updates automatically.

Header variant:

Name	Email	Role	Status
Jane Cooper	jane@example.com	Admin	Active
John Smith	john@example.com	Editor	Active
Sarah Wilson	sarah@example.com	Viewer	Away
Mike Johnson	mike@example.com	Editor	Offline

Components

The Table is composed of six subcomponents:

Prop	Type	Default	Description
Table	HTMLAttributes<HTMLTableElement>	—	Root table wrapper with horizontal scroll.
TableHeader	HTMLAttributes<HTMLTableSectionElement> & { variant?: TableHeaderVariant }	"default"	Wraps header rows (`<thead>`). `variant` — `"default"` (muted background), `"primary"` (brand bar + on-primary header text), `"secondary"` (stronger neutral), `"muted"` (subtle bar + muted header text). `TableHead` picks up contrast automatically.
TableBody	HTMLAttributes<HTMLTableSectionElement>	—	Wraps body rows (tbody) with dividers.
TableRow	HTMLAttributes<HTMLTableRowElement>	—	Table row with hover state.
TableHead	ThHTMLAttributes<HTMLTableCellElement>	—	Header cell (th) with semibold styling.
TableCell	TdHTMLAttributes<HTMLTableCellElement>	—	Body cell (td).

Installation

Install packages

pnpm add @akanaka-design/components @akanaka-design/tokens

Styles (app root)

import "@akanaka-design/tokens/css";
import "@akanaka-design/components/styles.css";

Usage

Basic usage

import { 
  Table, 
  TableHeader, 
  TableBody, 
  TableRow, 
  TableHead, 
  TableCell 
} from "@akanaka-design/components";

export function Example() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Role</TableHead>
          <TableHead>Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Jane Cooper</TableCell>
          <TableCell>Developer</TableCell>
          <TableCell>Active</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>John Smith</TableCell>
          <TableCell>Designer</TableCell>
          <TableCell>Away</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

With badges

Combine with other components for richer displays:

With badges

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Jane Cooper</TableCell>
      <TableCell><Badge variant="success">Active</Badge></TableCell>
    </TableRow>
    <TableRow>
      <TableCell>John Smith</TableCell>
      <TableCell><Badge variant="warning">Away</Badge></TableCell>
    </TableRow>
  </TableBody>
</Table>

Column alignment

Use Tailwind classes to align numeric or action columns:

Column alignment

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Item</TableHead>
      <TableHead className="text-right">Price</TableHead>
      <TableHead className="text-right">Qty</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Widget Pro</TableCell>
      <TableCell className="text-right">£29.99</TableCell>
      <TableCell className="text-right">3</TableCell>
    </TableRow>
  </TableBody>
</Table>

Header variants

Use variant on TableHeader for a tinted header row instead of ad hoc className overrides.

Variant	Role
`default`	Muted header background; standard foreground on headers
`primary`	Brand emphasis; header text uses on-primary contrast
`secondary`	Stronger neutral bar
`muted`	Extra-subtle bar with muted header text

TableHead cells receive the matching foreground automatically—avoid per-cell color overrides unless you have a rare exception.

TableHeader variant="default"

<Table>
  <TableHeader variant="default">
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>...</TableBody>
</Table>

TableHeader variant="primary"

<Table>
  <TableHeader variant="primary">
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>...</TableBody>
</Table>

TableHeader variant="secondary"

<Table>
  <TableHeader variant="secondary">
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>...</TableBody>
</Table>

TableHeader variant="muted"

<Table>
  <TableHeader variant="muted">
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>...</TableBody>
</Table>

Header variants (quick reference)

/* variant: "default" | "primary" | "secondary" | "muted"
   TableHead inherits the correct foreground; avoid per-cell color overrides. */
<TableHeader variant="primary">
  <TableRow>
    <TableHead>Name</TableHead>
    <TableHead>Status</TableHead>
  </TableRow>
</TableHeader>

Guidelines

When to use

Displaying records (users, orders, products)
Comparing items across attributes
Data that benefits from sorting or filtering

When not to use

Small amounts of data — use a list or cards
Single-column content — use a simple list
Highly visual comparisons — consider a chart

Content

Keep column headers short and descriptive
Align numbers to the right for easy scanning
Use badges or icons for status columns
Consider row actions (edit, delete) in a final column