Data Display

TableHeader

Header section of a table that groups column-header rows and exposes selection state to its descendants.

import { TableHeader } from '@lostgradient/cinder';
tablesection
01

Overview

thead wrapper that contains the column header row of a table.

Usage

TableHeader is a compose-only leaf of Table. The idiomatic API is Table.Header, reached through the parent namespace — see the table README for the composed snippet. The leaf is also a named export of @lostgradient/cinder.

02

When to use

Use when
  • Wrapping the column-header row that labels each column of a table.
Avoid when
  • Wrapping body data rows — use table-body instead.
03

Props

Props for table-header
Name
Type
Default
Description
children required snippet TableRow children — typically a single header row.
allSelected discriminated-union Checked state for the select-all checkbox. Required together with someSelected and onSelectAll when Table.selectable is true.
someSelected discriminated-union When true and allSelected is false, the select-all checkbox renders as indeterminate. The browser exposes that as aria-checked="mixed" to assistive tech. Required together with allSelected and onSelectAll when Table.selectable is true.
onSelectAll (next: boolean) => void Called when the user activates the select-all checkbox. Required together with allSelected and someSelected when Table.selectable is true.
selectAllLabel text 'Select all rows' Accessible name for the select-all checkbox. Defaults to "Select all rows". When the table contains rows with selectionDisabled={true}, pass a more accurate label such as "Select all selectable rows".