Header

Header is the header row of a table, row 0 of its keyboard-navigable grid. Slot in column elements, one per column, in the same order every item uses for its own cells.

The select-all checkbox, sticky flags, and roving-tabindex coordination are entirely managed by the owning table, so nothing on this element is meant to be set by hand outside that context.

Dependencies

eun-checkbox · renders the select-all control, once the owning table is selectable

Overview

API

Examples

Accessibility

Name

Status

Ada Lovelace

Active

When to use

Always exactly one header per table, as its first child, since it's what defines the column tracks every item shares. It's a real, independently registered element, not folded into the table itself, because, like every other piece of this feature, it's the consumer's own markup. See Table: Install & usage for a complete example.

Install & usage

npm install @eunomia/elements

import "@eunomia/elements/table-header.js";
import "@eunomia/elements/table-column.js";

<eun-table-header>
  <eun-table-column width="1fr">Name</eun-table-column>
  <eun-table-column width="120px">Status</eun-table-column>
</eun-table-header>

Everything else beyond the select-all checkbox is whatever eun-table-columns you slot in.

Properties

Header `<eun-table-header>`

Attributes

Name	Type	Default	Description
select-all-aria-label	string	"Select all rows"	Accessible label for the select-all checkbox while not every row is selected.
deselect-all-aria-label	string	"Deselect all rows"	Accessible label for the select-all checkbox once every row is selected.

Import the exact TypeScript type behind any property above, see Types.

Slots

Name	Description
(default)	Table column elements, one per column

CSS custom properties

Name	Description
--table-sticky-column-background	Sets the background color of a sticky first or last column's header cell, and the always-sticky checkbox header cell once the owning table is selectable. Falls back to table-header-background
--table-sticky-border-color	Sets the border color of this header's own bottom edge while sticky, falling back to table-border-color, and of the inner edge of a sticky first or last column's header cell, transparent by default
--table-checkbox-background	Sets the background color of the unchecked select-all checkbox, once the owning table is selectable
--table-checkbox-hover	Sets the background color of the unchecked select-all checkbox while hovered, once the owning table is selectable

Selectable

selectable, selectedCount, totalCount, and the sticky flags are pushed down by eun-table, so you never set them directly. This example shows the tri-state select-all checkbox once eun-table's own selectable is set. See Table: Selection and the floating action bar for the full flow.