Components

Table

Shows small, read-only data in a semantic HTML table.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook for the controls.

Live example, StorybookOpen in Storybook

Default

A Table has a caption (caption), a header row and data rows. The caption names the table. Use Table.RowHeader for the first cell that names the row.

Item list
Name	Status	Created	Count	Owner
First item	Active	12 Oct 2026	1,240	Alex
Second item	Draft	14 Oct 2026	86	Sam
Third item	Pending	15 Oct 2026	305	Jo

import { Badge, Table } from '@bigbang/ui';

export default function Default() {
  return (
    <Table caption="Item list">
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Name</Table.HeaderCell>
          <Table.HeaderCell>Status</Table.HeaderCell>
          <Table.HeaderCell>Created</Table.HeaderCell>
          <Table.HeaderCell numeric>Count</Table.HeaderCell>
          <Table.HeaderCell>Owner</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.RowHeader>First item</Table.RowHeader>
          <Table.Cell>
            <Badge tone="success">Active</Badge>
          </Table.Cell>
          <Table.Cell>12 Oct 2026</Table.Cell>
          <Table.Cell numeric>1,240</Table.Cell>
          <Table.Cell>Alex</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Second item</Table.RowHeader>
          <Table.Cell>
            <Badge tone="neutral">Draft</Badge>
          </Table.Cell>
          <Table.Cell>14 Oct 2026</Table.Cell>
          <Table.Cell numeric>86</Table.Cell>
          <Table.Cell>Sam</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Third item</Table.RowHeader>
          <Table.Cell>
            <Badge tone="warning">Pending</Badge>
          </Table.Cell>
          <Table.Cell>15 Oct 2026</Table.Cell>
          <Table.Cell numeric>305</Table.Cell>
          <Table.Cell>Jo</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

Density

density sets the row height: compact is at least 32 px, standard (the default) 40 px, comfortable 48 px. Use compact for long tables that users scan.

Item list: compact
Name	Status	Created	Count	Owner
First item	Active	12 Oct 2026	1,240	Alex
Second item	Draft	14 Oct 2026	86	Sam

Item list: comfortable
Name	Status	Created	Count	Owner
First item	Active	12 Oct 2026	1,240	Alex
Second item	Draft	14 Oct 2026	86	Sam

import { Badge, Table } from '@bigbang/ui';

export default function Density() {
  return (
    <div className="flex flex-col gap-3xl">
      {(['compact', 'comfortable'] as const).map((density) => (
        <Table key={density} caption={`Item list: ${density}`} density={density}>
          <Table.Header>
            <Table.Row>
              <Table.HeaderCell>Name</Table.HeaderCell>
              <Table.HeaderCell>Status</Table.HeaderCell>
              <Table.HeaderCell>Created</Table.HeaderCell>
              <Table.HeaderCell numeric>Count</Table.HeaderCell>
              <Table.HeaderCell>Owner</Table.HeaderCell>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            <Table.Row>
              <Table.RowHeader>First item</Table.RowHeader>
              <Table.Cell>
                <Badge tone="success">Active</Badge>
              </Table.Cell>
              <Table.Cell>12 Oct 2026</Table.Cell>
              <Table.Cell numeric>1,240</Table.Cell>
              <Table.Cell>Alex</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.RowHeader>Second item</Table.RowHeader>
              <Table.Cell>
                <Badge tone="neutral">Draft</Badge>
              </Table.Cell>
              <Table.Cell>14 Oct 2026</Table.Cell>
              <Table.Cell numeric>86</Table.Cell>
              <Table.Cell>Sam</Table.Cell>
            </Table.Row>
          </Table.Body>
        </Table>
      ))}
    </div>
  );
}

Striped

striped tints every second body row. It helps the eye follow a row across a wide table. Header and footer rows are not tinted.

Item list
Name	Status	Created	Count	Owner
First item	Active	12 Oct 2026	1,240	Alex
Second item	Draft	14 Oct 2026	86	Sam
Third item	Pending	15 Oct 2026	305	Jo

import { Badge, Table } from '@bigbang/ui';

export default function Striped() {
  return (
    <Table caption="Item list" striped>
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Name</Table.HeaderCell>
          <Table.HeaderCell>Status</Table.HeaderCell>
          <Table.HeaderCell>Created</Table.HeaderCell>
          <Table.HeaderCell numeric>Count</Table.HeaderCell>
          <Table.HeaderCell>Owner</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.RowHeader>First item</Table.RowHeader>
          <Table.Cell>
            <Badge tone="success">Active</Badge>
          </Table.Cell>
          <Table.Cell>12 Oct 2026</Table.Cell>
          <Table.Cell numeric>1,240</Table.Cell>
          <Table.Cell>Alex</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Second item</Table.RowHeader>
          <Table.Cell>
            <Badge tone="neutral">Draft</Badge>
          </Table.Cell>
          <Table.Cell>14 Oct 2026</Table.Cell>
          <Table.Cell numeric>86</Table.Cell>
          <Table.Cell>Sam</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Third item</Table.RowHeader>
          <Table.Cell>
            <Badge tone="warning">Pending</Badge>
          </Table.Cell>
          <Table.Cell>15 Oct 2026</Table.Cell>
          <Table.Cell numeric>305</Table.Cell>
          <Table.Cell>Jo</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

Numeric columns

numeric aligns the cell to the end and uses tabular numerals, so digits line up. Give the column header the same prop. Use align="center" for short statuses.

Item list
Name	Count	Status
First item	1,240	Active
Second item	86	Draft

import { Table } from '@bigbang/ui';

export default function Numeric() {
  return (
    <Table caption="Item list">
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Name</Table.HeaderCell>
          <Table.HeaderCell numeric>Count</Table.HeaderCell>
          <Table.HeaderCell align="center">Status</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.RowHeader>First item</Table.RowHeader>
          <Table.Cell numeric>1,240</Table.Cell>
          <Table.Cell align="center">Active</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Second item</Table.RowHeader>
          <Table.Cell numeric>86</Table.Cell>
          <Table.Cell align="center">Draft</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

Table.Footer is for summary rows such as totals; it takes the header colour.

Item list
Name	Count
First item	1,240
Second item	86
Total	1,326

import { Table } from '@bigbang/ui';

export default function WithFooter() {
  return (
    <Table caption="Item list">
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Name</Table.HeaderCell>
          <Table.HeaderCell numeric>Count</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.RowHeader>First item</Table.RowHeader>
          <Table.Cell numeric>1,240</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Second item</Table.RowHeader>
          <Table.Cell numeric>86</Table.Cell>
        </Table.Row>
      </Table.Body>
      <Table.Footer>
        <Table.Row>
          <Table.RowHeader>Total</Table.RowHeader>
          <Table.Cell numeric>1,326</Table.Cell>
        </Table.Row>
      </Table.Footer>
    </Table>
  );
}

Selected row

selected tints the row with the selected background and adds data-selected. A plain table has no aria-selected; the selection is a visual state. Say it in text too when the meaning matters.

Item list
Name	Status	Created	Count	Owner
First item	Active	12 Oct 2026	1,240	Alex
Second item	Draft	14 Oct 2026	86	Sam
Third item	Pending	15 Oct 2026	305	Jo

import { Badge, Table } from '@bigbang/ui';

export default function Selected() {
  return (
    <Table caption="Item list">
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Name</Table.HeaderCell>
          <Table.HeaderCell>Status</Table.HeaderCell>
          <Table.HeaderCell>Created</Table.HeaderCell>
          <Table.HeaderCell numeric>Count</Table.HeaderCell>
          <Table.HeaderCell>Owner</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.RowHeader>First item</Table.RowHeader>
          <Table.Cell>
            <Badge tone="success">Active</Badge>
          </Table.Cell>
          <Table.Cell>12 Oct 2026</Table.Cell>
          <Table.Cell numeric>1,240</Table.Cell>
          <Table.Cell>Alex</Table.Cell>
        </Table.Row>
        <Table.Row selected>
          <Table.RowHeader>Second item</Table.RowHeader>
          <Table.Cell>
            <Badge tone="neutral">Draft</Badge>
          </Table.Cell>
          <Table.Cell>14 Oct 2026</Table.Cell>
          <Table.Cell numeric>86</Table.Cell>
          <Table.Cell>Sam</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Third item</Table.RowHeader>
          <Table.Cell>
            <Badge tone="warning">Pending</Badge>
          </Table.Cell>
          <Table.Cell>15 Oct 2026</Table.Cell>
          <Table.Cell numeric>305</Table.Cell>
          <Table.Cell>Jo</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

Hoverable

hoverable tints a body row on hover; it is on by default, and hoverable={false} turns it off for a table that only shows a few values. Only the colour changes; the row never lifts. For a clickable row use DataTable, not this component.

Item list
Name	Status	Created	Count	Owner
First item	Active	12 Oct 2026	1,240	Alex
Second item	Draft	14 Oct 2026	86	Sam
Third item	Pending	15 Oct 2026	305	Jo

import { Badge, Table } from '@bigbang/ui';

export default function Hoverable() {
  return (
    <Table caption="Item list" hoverable>
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Name</Table.HeaderCell>
          <Table.HeaderCell>Status</Table.HeaderCell>
          <Table.HeaderCell>Created</Table.HeaderCell>
          <Table.HeaderCell numeric>Count</Table.HeaderCell>
          <Table.HeaderCell>Owner</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.RowHeader>First item</Table.RowHeader>
          <Table.Cell>
            <Badge tone="success">Active</Badge>
          </Table.Cell>
          <Table.Cell>12 Oct 2026</Table.Cell>
          <Table.Cell numeric>1,240</Table.Cell>
          <Table.Cell>Alex</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Second item</Table.RowHeader>
          <Table.Cell>
            <Badge tone="neutral">Draft</Badge>
          </Table.Cell>
          <Table.Cell>14 Oct 2026</Table.Cell>
          <Table.Cell numeric>86</Table.Cell>
          <Table.Cell>Sam</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Third item</Table.RowHeader>
          <Table.Cell>
            <Badge tone="warning">Pending</Badge>
          </Table.Cell>
          <Table.Cell>15 Oct 2026</Table.Cell>
          <Table.Cell numeric>305</Table.Cell>
          <Table.Cell>Jo</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

stickyHeader keeps the header cells at the top while the body scrolls. Give the container a height with className, such as max-h-64.

Item list
Name	Status	Created	Count	Owner
Item 1	Active	12 Oct 2026	1,240	Alex
Item 2	Draft	14 Oct 2026	86	Sam
Item 3	Pending	15 Oct 2026	305	Jo
Item 4	Active	12 Oct 2026	1,240	Alex
Item 5	Draft	14 Oct 2026	86	Sam
Item 6	Pending	15 Oct 2026	305	Jo
Item 7	Active	12 Oct 2026	1,240	Alex
Item 8	Draft	14 Oct 2026	86	Sam
Item 9	Pending	15 Oct 2026	305	Jo
Item 10	Active	12 Oct 2026	1,240	Alex
Item 11	Draft	14 Oct 2026	86	Sam
Item 12	Pending	15 Oct 2026	305	Jo

import { Badge, Table } from '@bigbang/ui';

export default function StickyHeader() {
  return (
    <Table caption="Item list" stickyHeader className="max-h-64">
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Name</Table.HeaderCell>
          <Table.HeaderCell>Status</Table.HeaderCell>
          <Table.HeaderCell>Created</Table.HeaderCell>
          <Table.HeaderCell numeric>Count</Table.HeaderCell>
          <Table.HeaderCell>Owner</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.RowHeader>Item 1</Table.RowHeader>
          <Table.Cell>
            <Badge tone="success">Active</Badge>
          </Table.Cell>
          <Table.Cell>12 Oct 2026</Table.Cell>
          <Table.Cell numeric>1,240</Table.Cell>
          <Table.Cell>Alex</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Item 2</Table.RowHeader>
          <Table.Cell>
            <Badge tone="neutral">Draft</Badge>
          </Table.Cell>
          <Table.Cell>14 Oct 2026</Table.Cell>
          <Table.Cell numeric>86</Table.Cell>
          <Table.Cell>Sam</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Item 3</Table.RowHeader>
          <Table.Cell>
            <Badge tone="warning">Pending</Badge>
          </Table.Cell>
          <Table.Cell>15 Oct 2026</Table.Cell>
          <Table.Cell numeric>305</Table.Cell>
          <Table.Cell>Jo</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Item 4</Table.RowHeader>
          <Table.Cell>
            <Badge tone="success">Active</Badge>
          </Table.Cell>
          <Table.Cell>12 Oct 2026</Table.Cell>
          <Table.Cell numeric>1,240</Table.Cell>
          <Table.Cell>Alex</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Item 5</Table.RowHeader>
          <Table.Cell>
            <Badge tone="neutral">Draft</Badge>
          </Table.Cell>
          <Table.Cell>14 Oct 2026</Table.Cell>
          <Table.Cell numeric>86</Table.Cell>
          <Table.Cell>Sam</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Item 6</Table.RowHeader>
          <Table.Cell>
            <Badge tone="warning">Pending</Badge>
          </Table.Cell>
          <Table.Cell>15 Oct 2026</Table.Cell>
          <Table.Cell numeric>305</Table.Cell>
          <Table.Cell>Jo</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Item 7</Table.RowHeader>
          <Table.Cell>
            <Badge tone="success">Active</Badge>
          </Table.Cell>
          <Table.Cell>12 Oct 2026</Table.Cell>
          <Table.Cell numeric>1,240</Table.Cell>
          <Table.Cell>Alex</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Item 8</Table.RowHeader>
          <Table.Cell>
            <Badge tone="neutral">Draft</Badge>
          </Table.Cell>
          <Table.Cell>14 Oct 2026</Table.Cell>
          <Table.Cell numeric>86</Table.Cell>
          <Table.Cell>Sam</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Item 9</Table.RowHeader>
          <Table.Cell>
            <Badge tone="warning">Pending</Badge>
          </Table.Cell>
          <Table.Cell>15 Oct 2026</Table.Cell>
          <Table.Cell numeric>305</Table.Cell>
          <Table.Cell>Jo</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Item 10</Table.RowHeader>
          <Table.Cell>
            <Badge tone="success">Active</Badge>
          </Table.Cell>
          <Table.Cell>12 Oct 2026</Table.Cell>
          <Table.Cell numeric>1,240</Table.Cell>
          <Table.Cell>Alex</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Item 11</Table.RowHeader>
          <Table.Cell>
            <Badge tone="neutral">Draft</Badge>
          </Table.Cell>
          <Table.Cell>14 Oct 2026</Table.Cell>
          <Table.Cell numeric>86</Table.Cell>
          <Table.Cell>Sam</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Item 12</Table.RowHeader>
          <Table.Cell>
            <Badge tone="warning">Pending</Badge>
          </Table.Cell>
          <Table.Cell>15 Oct 2026</Table.Cell>
          <Table.Cell numeric>305</Table.Cell>
          <Table.Cell>Jo</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

Horizontal scroll

When the table is wider than its container, the container scrolls sideways. The scroll region is named and takes keyboard focus; Tab to it and scroll with the arrow keys. Cut long text with truncate and a column width.

Item list
Name	Status	Created	Count	Owner
First item	Active	12 Oct 2026	1,240	Alex
Second item	Draft	14 Oct 2026	86	Sam

import { Badge, Table } from '@bigbang/ui';

export default function HorizontalScroll() {
  return (
    <Table caption="Item list" className="max-w-md">
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Name</Table.HeaderCell>
          <Table.HeaderCell>Status</Table.HeaderCell>
          <Table.HeaderCell>Created</Table.HeaderCell>
          <Table.HeaderCell numeric>Count</Table.HeaderCell>
          <Table.HeaderCell>Owner</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.RowHeader>First item</Table.RowHeader>
          <Table.Cell>
            <Badge tone="success">Active</Badge>
          </Table.Cell>
          <Table.Cell>12 Oct 2026</Table.Cell>
          <Table.Cell numeric>1,240</Table.Cell>
          <Table.Cell>Alex</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Second item</Table.RowHeader>
          <Table.Cell>
            <Badge tone="neutral">Draft</Badge>
          </Table.Cell>
          <Table.Cell>14 Oct 2026</Table.Cell>
          <Table.Cell numeric>86</Table.Cell>
          <Table.Cell>Sam</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

Light and dark mode

Table takes its colours from surface, text and border tokens; it keeps the same structure in both modes.

Item list
Name	Status	Created	Count	Owner
First item	Active	12 Oct 2026	1,240	Alex
Second item	Draft	14 Oct 2026	86	Sam
Third item	Pending	15 Oct 2026	305	Jo

Item list
Name	Status	Created	Count	Owner
First item	Active	12 Oct 2026	1,240	Alex
Second item	Draft	14 Oct 2026	86	Sam
Third item	Pending	15 Oct 2026	305	Jo

import { Badge, Table } from '@bigbang/ui';

export default function Striped() {
  return (
    <Table caption="Item list" striped>
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Name</Table.HeaderCell>
          <Table.HeaderCell>Status</Table.HeaderCell>
          <Table.HeaderCell>Created</Table.HeaderCell>
          <Table.HeaderCell numeric>Count</Table.HeaderCell>
          <Table.HeaderCell>Owner</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.RowHeader>First item</Table.RowHeader>
          <Table.Cell>
            <Badge tone="success">Active</Badge>
          </Table.Cell>
          <Table.Cell>12 Oct 2026</Table.Cell>
          <Table.Cell numeric>1,240</Table.Cell>
          <Table.Cell>Alex</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Second item</Table.RowHeader>
          <Table.Cell>
            <Badge tone="neutral">Draft</Badge>
          </Table.Cell>
          <Table.Cell>14 Oct 2026</Table.Cell>
          <Table.Cell numeric>86</Table.Cell>
          <Table.Cell>Sam</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Third item</Table.RowHeader>
          <Table.Cell>
            <Badge tone="warning">Pending</Badge>
          </Table.Cell>
          <Table.Cell>15 Oct 2026</Table.Cell>
          <Table.Cell numeric>305</Table.Cell>
          <Table.Cell>Jo</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}