Eunomia v1.0.0-beta.2
AllAngularReactNext.jsJavaScriptVue
EunomiaSalmonForestVioletOceanGoldFireCustom…
🇬🇧 English🇫🇷 Français

Column

Column is a single header cell, slotted into a header, one per column, in order. Its width feeds directly into the owning table's shared column template, while its label content is entirely free-form, through the default slot.

Overview API Examples Accessibility
# Name 1 Ada Lovelace

When to use

One column per column, always inside a header, in the exact order every row's own cells follow. Its width accepts any valid CSS grid track, such as a fixed length, a percentage, or a flexible fraction. Left unset, it falls back to a flexible track shared with every other unset column.

Its sort indicator is a presentation hook only, since this element has no sort behavior of its own. Wire your own click handler and re-render your rows in the new order to actually sort. See Table: Accessibility for the ARIA contract this participates in.

Install & usage

npm install @eunomia/elements
import "@eunomia/elements/table-column.js";
<eun-table-column width="120px">Status</eun-table-column>

Properties

Column <eun-table-column>

Attributes

NameTypeDefaultDescription
widthstring—This column's track size, fed verbatim into the table's shared grid template, such as 120px, 20%, or 1fr. A flexible track is used when unset
sort'ascending' | 'descending' | 'none'—Reflects the sort state to assistive technology. Presentation only

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

Slots

NameDescription
(default)The column header's label content

CSS custom properties

NameDescription
--table-column-colorSets the text color
--table-column-font-weightSets the font weight
--table-column-border-colorSets the color of a vertical divider on this header cell's trailing edge, between it and the next column. Transparent, with no divider, by default

CSS shadow parts

NameDescription
columnThe column's own padded content box. Exposed for effects the column's CSS custom properties don't cover

Widths

# Name Status 1 Ada Lovelace Active 
<eun-table-column width="64px">#</eun-table-column>
<eun-table-column width="2fr">Name</eun-table-column>
<eun-table-column width="120px">Status</eun-table-column>

Sort indicator

Name Status Ada Lovelace Active 
<eun-table-column width="1fr" sort="ascending">Name</eun-table-column>

role="columnheader". sort reflects aria-sort ("ascending"/"descending"/"none") when set (a presentation hook only, see the class doc above). It participates in the owning eun-table's roving-tabindex grid as row 0's cells. See Table: Accessibility for the full keyboard pattern.