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/table-header';
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 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

Props for table-header
Name Type Default Required Bindable Description
children snippet req TableRow children — typically a single header row.
allSelected boolean Checked state for the select-all checkbox. Required when Table.selectable is true.
someSelected boolean 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 (alongside allSelected and onSelectAll) when Table.selectable is true for accurate checkbox state.
onSelectAll (next: boolean) => void Called when the user activates the select-all checkbox. Required 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".