Skip to main content
Digitaltableteur

Design system components

TableCell

A table data cell (<td>) for the Table family. align controls text alignment; numeric right-aligns with tabular figures so columns line up on the decimal.

Status: stable. Group: data-display. Markdown version: /design-system/components/table-cell.md

When to use

TableCell is the body cell of the Table family: plain tabular data with an optional numeric mode that aligns figures on the decimal. Header semantics belong to TableHeaderCell; TableCell never announces scope.

When not to use

  • Do not render it outside a table row.
  • Do not use it for a header; use TableHeaderCell so column/row context is announced.

Look-alikes

  • TableHeaderCell: Do not use it for a header; use TableHeaderCell so column/row context is announced.

Props

TableCell props
PropTypeDefaultDescriptionRequired
align"center" | "end" | "start"startCell content alignment. Defaults to "start", or "end" when numeric is set.No
numericbooleanfalseRight-align and tabular-figure numeric values.No
labelstringnoneColumn name shown before the value when the parent Table stacks rows (stackOnNarrow). Hidden from assistive technology, which reads the column header instead.No

Variants

  • Allowed align values: start, center, end (default start).
  • Allowed numeric values: true, false (default false).

Invalid combinations

The contract records no invalid combinations.

Keyboard

The contract records no keyboard interaction.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

TableCell rules
LevelRuleHow it is checked
MUSTARIA: Native <td> with an explicit role="cell", which keeps cell semantics when a stacked (stackOnNarrow) table changes display; keep the role.Not yet verified: no evidence record. WCAG 4.1.2.
MUSTARIA: Pairs with TableHeaderCell scope=col/row so cells inherit column and row context.Not yet verified: no evidence record. WCAG 4.1.2.
MUSTRequired stories produce no axe violations at the configured severity.Automated by npm run test:stories:matrix:ci. WCAG 2.5.8.
MUSTThe accessibility tree (role, name, state) matches the committed snapshot for every required story.Automated by npm run test:stories:matrix:ci. WCAG 1.3.1, 4.1.2.
MUSTThe component remains legible and operable under a real browser forced-colors: active pass.Automated by npm run test:stories:hc.
MUSTA human completed an end-to-end accessibility review of this component.Manual review, last on 2026-11-04.

Install and import

  • Install: npm install @digitaltableteur/react (version 0.9.1, restricted access on npm).
  • Import: import { TableCell } from "@digitaltableteur/react";
  • Entry point: @digitaltableteur/react/content exports it too.
  • Styles: import @digitaltableteur/react/style.css once at the app boundary.

Links