Skip to content
Site volume
Colourway

Components

Table

The ledger: captioned, tabular figures end-aligned, scrolling sideways or stacking rows on phones.

  • Beta
  • Reading layer
  • Server component
  • Since 0.1.0
  • Press check
Import from@maxgrits/overprint-react/table
On this page

Example#

Look of this example
Projects
ProjectScore
Fernlight98
Live render of examples/table/basic.tsx

Usage#

Use a table for data people compare across rows and columns: projects and their scores, invoices, a schedule. The default ledger look has no zebra stripes: a 2 px rule under the head, soft rules between rows and numbers aligned at the end.

  • Parts. Table with a required TableCaption (hide it visually with captionHidden when a heading already says it), TableHeader, TableBody, TableRow, TableHead and TableCell.
  • Numbers take numeric, for tabular figures aligned at the end.
  • Overflow. overflow="scroll" (default) puts the table in a labelled region that scrolls sideways and takes focus; overflow="stack" turns rows into blocks on narrow screens, each cell prefixed by its header.
  • Sorting is TableSortButton in a head cell.
  • Layout is not a table. Use Grid for cards and SpecStrip for a few facts.

Anatomy#

Projects
ProjectScore
Fernlight98
The parts of examples/table/basic.tsx, numbered:
  1. CaptionNames the table; it labels the scroll region..mk-table-caption
  2. Head rowLabel role over a 2 px ink rule..mk-table-header
  3. Row48 px at least, soft rules between..mk-table-body .mk-table-row
  4. NumberTabular figures, aligned at the end..mk-table-cell[data-numeric]

Volume#

Reading layer: identical at every volume.

  • Quiet

    Projects
    ProjectScore
    Fernlight98

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    Projects
    ProjectScore
    Fernlight98

    The site default. Art on its own plates, one display moment per view.

  • Press

    Projects
    ProjectScore
    Fernlight98

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    Projects
    ProjectScore
    Fernlight98

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • Column heads are short nouns with units: "Score", "Budget (CAD)".
  • One fact per cell; a cell that needs a sentence belongs in a list.
  • Empty cells say why ("Not tracked"), never leave a blank people read as zero.

Do and don't#

Do

Projects
ProjectScore
Fernlight98

Data in rows and columns.

Don't

A table used to lay out a sign-up form in two columns.

A table as layout.

Screen readers announce tables as data, with row and column counts. Layout in a table reads as nonsense; use Grid.

Accessibility#

  • Every table has a caption (TableCaption); captionHidden keeps it for screen readers only.
  • The scroll wrapper is a focusable region named by regionLabel, so keyboard users can scroll it.
  • Stacked rows keep explicit table roles and print each cell's header.

Props#

PropTypeDefaultDescription
variant"compact" | "ledger"none
overflow"scroll" | "stack"none
stickyFirstColumnbooleannone
captionHiddenbooleannoneThe caption stays for screen readers only.
regionLabelstringnoneThe scroll region's name (default: "Table, scrolls sideways"); give the caption's words.
children requiredReactNodenone

Plus 288 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from TableProps in packages/overprint-react/src/reading/table/table.tsx.

Tokens#

System tokens (9)

Its own properties (1)

  • --mk-table-row

Scanned from its CSS at build and checked against its registry entry; 4 read but not declared there.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactSection with its plate and Art slot, Plate, VolumeScope, PageHero, SectionHead, Eyebrow, Card, LineCard, InfoPanel, Stack, Cluster, Grid, Container, Main, Rule and the FittedLine client fitter; Navbar with the NavDisclosure mega panels, Footer, FooterMap, BuildStamp, SkipLink, ActionDock and VisitorControls; the Table parts, ComparisonTable with the one-tier switcher, SpecStrip, Numeral, Stat, StatGroup, StatusChip, Badge and ScoreDial; Prose with mdxComponents, Quote, CodeBlock with CopyButton, Figure, ScreenshotFrame and PhoneFrame; and the brand: the three evolved 2 × 2 options in markGeometry (a Overprint by default, b Paper seam, c Key block) with the pixel-snapped px mode and the one-ink seam variant, logoGeometry with the 1x clear-space frame, Mark, Wordmark, Logo, MaxosMark and LineBadge. Read the whole entry