HeaderCell
Column title for a data table: uppercase label, optional select-all checkbox, optional sort, with a brand-faint bottom border, 2px or 1px.
Master
Switch size, alignment and sort. Toggle checkbox for select-all.
Usage
Use HeaderCell inside th scope=col, one per column, above Cell rows. Match its size to the Cell size so side padding lines up. Use alignment end for number columns and center for a checkbox-only or actions column. HeaderCell composes kit Checkbox and Icon. See contracts/headercell.json for the full contract.
Do's
- Column titles in a data table.
- Select-all in the first column.
- Sortable columns.
Don'ts
- Do not invent a local th, TableHeader, ColumnTitle or SortButton.
- Do not use Cell for column titles, or HeaderCell in body rows.
- Do not mix HeaderCell and Cell sizes in one table.
- Do not mix line weights in one header row. Set line on the Table or DataGrid.
- Do not make a column sortable without a label.
- Do not use raw hex.
<HeaderCell label="Customer" size="md" alignment="start" line="medium" sortable sort="asc" />