Skip to main content
Digitaltableteur

Design system components

TableRow

A table row (<tr>) for the Table family. Works in <thead> and <tbody>; selected renders the selection surface. Presentational; semantics belong to the surrounding table.

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

When to use

TableRow groups cells inside a Table's thead or tbody and carries the selected state visually while a real selection control (Checkbox) remains the source of truth.

When not to use

  • Do not render it outside a table.
  • Do not rely on selected for semantics; pair it with a checkbox or aria-selected on the consuming structure.

Look-alikes

The contract names no look-alike with a deciding condition.

Props

TableRow props
PropTypeDefaultDescriptionRequired
selectedbooleanfalseRenders the selected surface and sets data-selected. Visual only.No

Variants

  • Allowed selected 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.

TableRow rules
LevelRuleHow it is checked
MUSTARIA: <tr> with an explicit role=row, kept so rows stay rows when a stackOnNarrow Table changes display (some browsers drop native row semantics then); no other ARIA of its own.Not yet verified: no evidence record. WCAG 4.1.2.
MUSTARIA: Selection is visual only (data-selected); the row's selection state belongs to a checkbox or the consuming app.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 { TableRow } from "@digitaltableteur/react";
  • Entry point: @digitaltableteur/react/content exports it too.
  • Styles: import @digitaltableteur/react/style.css once at the app boundary.

Links