Data Display

TableHeaderCell

Column header cell within a table-header that labels a column and optionally triggers sort changes when sortable.

import { TableHeaderCell } from '@lostgradient/cinder/table-header-cell';
tableheader
01

Overview

th cell within a table header row, supporting sort indicators and column labels.

Usage

TableHeaderCell is a compose-only leaf of Table. The idiomatic API is Table.HeaderCell, reached through the parent namespace — see the table README for the composed snippet. The flat @lostgradient/cinder/table-header-cell subpath remains exported for à-la-carte builds that import the leaf directly.

02

When to use

Use when
  • Labeling a column inside a table-header row.
  • Making a column user-sortable by setting the sortable prop and supplying a column identifier.
Avoid when
  • Rendering a body data cell — use table-cell instead.
03

Props

Props for table-header-cell
Name Type Default Required Bindable Description
column text Column key. Required when sortable=true so the parent Table can track which column the user activated.
sortable boolean false When true, render a button inside the <th> and dispatch sort intents to the parent Table. The cell's aria-sort reflects the current sort direction (ascending, descending, or none).
scope 'col' | 'colgroup' 'col' When set, hint to assistive tech that the column groups multiple rows.
align 'left' | 'center' | 'right' 'left' Horizontal alignment for the header cell content. Defaults to 'left'.
children snippet req Cell content (column label).