Table

Table is a thin, styled wrapper over a semantic <table>, sitting inside a bordered, rounded surface. It's a pure Server Component — no state, no "use client" — so it drops straight into an RSC tree or an MDX page.

You compose it from namespaced parts: an optional non-table header (Table.Toolbar + Table.Title for a title and actions), a Table.Content scroll region that holds the <table>, and the semantic parts Table.Head / Table.Body / Table.Foot / Table.Row / Table.HeaderCell / Table.Cell. The rounded border clips its content, so the corners stay intact even when the scroll region shows a scrollbar.

It carries no variant×color axis — a table is structural. The only knobs are size (density), striped, and stickyHeader / stickyFooter. For a data-driven, sortable/filterable table, reach for DataTable, which renders through this primitive.

import { Table } from '@42/ui-react/table';

<Table>
  <Table.Toolbar>
    <Table.Title>Members</Table.Title>
    <Button size="sm">Add member</Button>
  </Table.Toolbar>
  <Table.Content>
    <Table.Head>
      <Table.Row>
        <Table.HeaderCell>Name</Table.HeaderCell>
        <Table.HeaderCell>Role</Table.HeaderCell>
        <Table.HeaderCell className="text-right">Commits</Table.HeaderCell>
      </Table.Row>
    </Table.Head>
    <Table.Body>
      <Table.Row>
        <Table.Cell>Ada Lovelace</Table.Cell>
        <Table.Cell>Staff</Table.Cell>
        <Table.Cell className="text-right">128</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table.Content>
</Table>

Basic

The table parts go inside Table.Content. Numeric columns read best right-aligned — pass className="text-right" to the header and cells (there's no align prop on the primitive; DataTable adds per-column alignment).

<Table>  <Table.Content>    <Table.Head>      <Table.Row>        <Table.HeaderCell>Name</Table.HeaderCell>        <Table.HeaderCell>Role</Table.HeaderCell>        <Table.HeaderCell className="text-right">Commits</Table.HeaderCell>      </Table.Row>    </Table.Head>    <Table.Body>      <Table.Row>        <Table.Cell>Ada Lovelace</Table.Cell>        <Table.Cell>Staff</Table.Cell>        <Table.Cell className="text-right">128</Table.Cell>      </Table.Row>    </Table.Body>  </Table.Content></Table>

Header with title & actions

Table.Toolbar is a non-<table> header bar above the scroll region — a title on the left (Table.Title) and any actions on the right. It's separated from the table by a border and stays put when the body scrolls.

<Table>  <Table.Toolbar>    <Table.Title>Members</Table.Title>    <Button size="sm">Add member</Button>  </Table.Toolbar>  <Table.Content>{/* … */}</Table.Content></Table>

Striped

striped tints even body rows — easier to scan across wide rows. It targets tbody rows only, so the header is untouched.

<Table striped>  <Table.Content>{/* … */}</Table.Content></Table>

Density

size scales cell padding and text from xs to xl (default md), reusing the kit's canonical Size scale.

<Table size="sm">{/* … */}</Table><Table size="lg">{/* … */}</Table>

Sticky header & footer

stickyHeader pins the header to the top while the body scrolls; stickyFooter pins a Table.Foot row (a totals/summary row) to the bottom. Both need a bounded height on the scroll region — set max-h-* on Table (bounds the whole surface, toolbar included) or on Table.Content (bounds just the scroll region). The separators are cell borders (border-collapse: separate), so they stay visible while the header/footer are pinned, and the rounded border keeps its corners around the scrollbar.

<Table stickyHeader stickyFooter striped className="max-h-64">  <Table.Content>    <Table.Head>{/* … */}</Table.Head>    <Table.Body>{/* many rows */}</Table.Body>    <Table.Foot>{/* pinned totals row */}</Table.Foot>  </Table.Content></Table>

Horizontal + vertical scroll

Table.Content scrolls on both axes at once. A wide table (more columns than fit) scrolls horizontally, while a bounded height (max-h-*) plus stickyHeader scrolls it vertically with the header pinned — the header scrolls sideways in lockstep with the body so columns stay aligned. Both scrollbars are clipped by the rounded container, so its corners stay clean. Keep cell content on one line with whitespace-nowrap so columns don't wrap instead of overflowing.

A soft shadow appears on each horizontal side that still has content to scroll to, and fades out as you reach that edge — a scroll affordance driven purely by scroll position in CSS (no JS, so Table stays a Server Component). Browsers without scroll-driven animations simply show no fade.

<Table stickyHeader className="max-h-72">  <Table.Content classNames={{ table: 'min-w-[48rem]' }}>    <Table.Head>      <Table.Row>        <Table.HeaderCell>#</Table.HeaderCell>        <Table.HeaderCell>Name</Table.HeaderCell>        <Table.HeaderCell>Email</Table.HeaderCell>        {/* …more columns… */}      </Table.Row>    </Table.Head>    <Table.Body>{/* many wide rows */}</Table.Body>  </Table.Content></Table>

Summary footer

Table.Foot renders a <tfoot> with a top separator — a natural home for totals.

<Table>  <Table.Content>    <Table.Head>{/* … */}</Table.Head>    <Table.Body>{/* … */}</Table.Body>    <Table.Foot>      <Table.Row>        <Table.Cell>Total</Table.Cell>        <Table.Cell className="text-right">388</Table.Cell>      </Table.Row>    </Table.Foot>  </Table.Content></Table>

Subcomponents

API