Cell

Cell is a single data cell, slotted into an item, one per column, in the same order the owning header's columns use. Content is entirely free-form through the default slot: plain text, a tag, an icon, a nested button, anything.

Overview

API

Examples

Accessibility

Name

Status

Ada Lovelace

Active

When to use

One cell per column, in order, inside every item. It has no properties of its own beyond what any element offers, since its grid cell role and roving tab stop are entirely managed by the owning table. Align content with its own alignment custom property rather than styling the slotted content itself, so alignment stays consistent whether the cell holds text or a wrapping element.

Install & usage

npm install @eunomia/elements

import "@eunomia/elements/table-cell.js";

<eun-table-cell>Ada Lovelace</eun-table-cell>

Properties

Cell `<eun-table-cell>`

Slots

Name	Description
(default)	The cell's content, entirely free-form

CSS custom properties

Name	Description
--table-cell-align	Sets the horizontal alignment of the cell's content, such as center or flex-end
--table-cell-color	Sets the text color
--table-column-border-color	Sets the color of a vertical divider on this cell's trailing edge, between it and the next column. Transparent, with no divider, by default

CSS shadow parts

Name	Description
cell	The cell's own padded content box. Exposed for effects the cell's CSS custom properties don't cover

Arbitrary content

Task

Tags

Ship release notes

Done

v2.4

<eun-table-cell>
  <div style="display: flex; align-items: center; gap: 8px;">
    <eun-icon name="check_circle" size="18"></eun-icon>
    <span>Ship release notes</span>
  </div>
</eun-table-cell>

role="gridcell". It participates in the owning eun-table's roving-tabindex grid. See Table: Accessibility for the full keyboard pattern, including how a cell's own focusable content (a nested button or link) is reached via Tab once the cell itself has the roving focus.