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 flat @lostgradient/cinder/table-header subpath remains exported for
à-la-carte builds that import the leaf directly.
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
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". |