x-table-cell

A stateless table cell Web Component. Works standalone today and coordinates with future x-table-row / x-table components via bubbling events.

<x-table-cell>Cell content</x-table-cell>

<x-table-cell type="header" sortable sort-direction="asc">
  Name
</x-table-cell>

Attributes

Attribute	Type	Default	Description
`type`	`"data" \| "header"`	`"data"`	Cell semantic type. `"header"` maps to `columnheader`/`rowheader` ARIA role; `"data"` maps to `cell`.
`scope`	`"col" \| "row" \| "colgroup" \| "rowgroup"`	`"col"`	Header scope. Determines whether a header is a `columnheader` or `rowheader`. Meaningful only when `type="header"`.
`align`	`"start" \| "center" \| "end"`	`"start"`	Horizontal content alignment.
`valign`	`"top" \| "middle" \| "bottom"`	`"middle"`	Vertical content alignment.
`col-span`	positive integer	`1`	Number of grid columns the cell spans. Sets `style.gridColumn="span N"` on the host for CSS Grid parents.
`row-span`	positive integer	`1`	Number of grid rows the cell spans. Sets `style.gridRow="span N"` on the host.
`truncate`	boolean (presence)	`false`	Truncates overflowing text with an ellipsis.
`sticky`	`"none" \| "start" \| "end"`	`"none"`	Sticky column. `"start"` sticks to the inline-start edge; `"end"` to the inline-end edge. Requires an opaque `--x-table-cell-sticky-bg`.
`sortable`	boolean (presence)	`false`	Shows the sort button. Only effective when `type="header"`.
`sort-direction`	`"none" \| "asc" \| "desc"`	`"none"`	Current sort state. Updates the sort icon and `aria-sort`.
`disabled`	boolean (presence)	`false`	Disables interactions and applies reduced opacity.

Properties

Property	Type	Reflects	Default
`type`	`string`	`type` attribute	`"data"`
`scope`	`string`	`scope` attribute	`"col"`
`align`	`string`	`align` attribute	`"start"`
`valign`	`string`	`valign` attribute	`"middle"`
`colSpan`	`number`	`col-span` attribute	`1`
`rowSpan`	`number`	`row-span` attribute	`1`
`truncate`	`boolean`	`truncate` attribute	`false`
`sticky`	`string`	`sticky` attribute	`"none"`
`sortable`	`boolean`	`sortable` attribute	`false`
`sortDirection`	`string`	`sort-direction` attribute	`"none"`
`disabled`	`boolean`	`disabled` attribute	`false`

Events

`x-table-cell-sort`

Fired when the sort button is activated. The component is stateless — the consumer must update the sort-direction attribute to reflect the new state.

Property	Value
Bubbles	`true`
Composed	`true`
Cancelable	`true`

Detail:

{
  direction: "asc" | "desc" | "none";  // the next direction
  previousDirection: "none" | "asc" | "desc";
}

Calling event.preventDefault() cancels the action; the attribute will not be updated externally.

`x-table-cell-connected`

Fired on every connectedCallback. Consumed by future x-table-row to discover and track cells.

Property	Value
Bubbles	`true`
Composed	`true`
Cancelable	`false`

Detail: { type, scope, colSpan, rowSpan, align }

`x-table-cell-disconnected`

Fired on every disconnectedCallback.

Property	Value
Bubbles	`true`
Composed	`true`
Cancelable	`false`

Detail: {}

Slots

Name	Description
(default)	Cell content
`sort-icon`	Custom sort icon; replaces the default inline SVG arrows.

Parts

Part	Element	Description
`cell`	`div`	Outer layout wrapper; receives padding, background, border.
`content`	`span`	Content area wrapping the default slot.
`sort-btn`	`button`	Sort interaction button (visible for header+sortable cells only).
`sort-icon-default`	`span`	Default inline SVG sort icon (neutral/ascending/descending).

CSS Custom Properties

Layout

Property	Default	Description
`--x-table-cell-padding`	`0.5rem 0.75rem`	Cell padding.
`--x-table-cell-border-width`	`1px`	Border width (bottom border).
`--x-table-cell-min-width`	`0`	Minimum cell width.
`--x-table-cell-max-width`	`none`	Maximum cell width.

Colors

Property	Default (light)	Default (dark)	Description
`--x-table-cell-bg`	`transparent`	`transparent`	Data cell background.
`--x-table-cell-header-bg`	`rgba(0,0,0,0.04)`	`rgba(255,255,255,0.06)`	Header cell background.
`--x-table-cell-border-color`	`rgba(0,0,0,0.1)`	`rgba(255,255,255,0.1)`	Border color.
`--x-table-cell-color`	`inherit`	`inherit`	Data cell text color.
`--x-table-cell-header-color`	`inherit`	`inherit`	Header cell text color.
`--x-table-cell-sort-color`	`rgba(0,0,0,0.4)`	`rgba(255,255,255,0.4)`	Sort icon default color.
`--x-table-cell-sort-hover-color`	`rgba(0,0,0,0.7)`	`rgba(255,255,255,0.7)`	Sort icon hover color.
`--x-table-cell-sticky-bg`	`#ffffff`	`#1f2937`	Sticky cell background (must be opaque).
`--x-table-cell-focus-ring`	`rgba(59,130,246,0.5)`	same	Sort button focus ring.

Typography

Property	Default	Description
`--x-table-cell-font-size`	`inherit`	Cell font size.
`--x-table-cell-header-font-weight`	`600`	Header cell font weight.

Motion

Property	Default	Description
`--x-table-cell-transition-duration`	`150ms`	Sort button color transition duration.

State

Property	Default	Description
`--x-table-cell-disabled-opacity`	`0.45`	Opacity when disabled.

Accessibility

ARIA Role Mapping

`type`	`scope`	`role` on host
`"data"`	any	`"cell"`
`"header"`	`"col"` (default)	`"columnheader"`
`"header"`	`"colgroup"`	`"columnheader"`
`"header"`	`"row"`	`"rowheader"`
`"header"`	`"rowgroup"`	`"rowheader"`

`aria-sort`

Set on the host element when either sortable is present or sort-direction is not "none":

`sort-direction`	`aria-sort`
`"none"`	`"none"`
`"asc"`	`"ascending"`
`"desc"`	`"descending"`

When neither sortable nor a non-"none" direction is set, aria-sort is removed.

`aria-disabled`

Set to "true" on the host when disabled is present.

Sort Button

The sort button's aria-label describes the action that will occur on activation, not the current state:

Current `sort-direction`	Button `aria-label`
`"none"`	`"Sort ascending"`
`"asc"`	`"Sort descending"`
`"desc"`	`"Remove sort"`

Keyboard

Key	Target	Action
`Enter` / `Space`	Sort button	Activates sort, fires `x-table-cell-sort`

Sort Cycling

The component is stateless — clicking the sort button fires x-table-cell-sort and does nothing else. The consumer must update the sort-direction attribute:

cell.addEventListener('x-table-cell-sort', (e) => {
  // e.detail.direction is the next direction
  cell.setAttribute('sort-direction', e.detail.direction);
});

Direction cycles: "none" → "asc" → "desc" → "none".

To cancel a sort action (e.g. for async validation):

cell.addEventListener('x-table-cell-sort', (e) => {
  e.preventDefault();  // sort-direction is not updated
});

Grid Span (col-span / row-span)

When x-table-cell is placed in a CSS Grid context (as provided by a future x-table-row), setting col-span and row-span drives the cell's grid placement:

col-span="2" → style.gridColumn = "span 2" on the host
row-span="3" → style.gridRow = "span 3" on the host
Value 1 clears the inline style (no span)

<!-- Spans 2 columns in an x-table-row grid -->
<x-table-cell col-span="2">Wide cell</x-table-cell>

Sticky Positioning

Sticky cells require an opaque background. The --x-table-cell-sticky-bg custom property controls this:

x-table-cell {
  --x-table-cell-sticky-bg: #ffffff; /* or match your row background */
}

<x-table-cell sticky="start">Frozen first column</x-table-cell>

Note: sticky positioning requires a scrollable ancestor container.

Parent Coordination Events

When x-table-row and x-table are implemented, they will consume the x-table-cell-connected and x-table-cell-disconnected events to track cells. The cell fires these unconditionally — no configuration needed.

Examples

Basic data cell

<x-table-cell>Hello world</x-table-cell>

Header cell with sort

<x-table-cell type="header" sortable sort-direction="none">
  Name
</x-table-cell>

<script>
  document.querySelector('x-table-cell').addEventListener('x-table-cell-sort', (e) => {
    e.target.setAttribute('sort-direction', e.detail.direction);
  });
</script>

Truncated cell

<x-table-cell truncate style="width: 150px;">
  This is a very long text that will be truncated
</x-table-cell>

Spanning cells (in a CSS Grid row)

<div style="display: grid; grid-template-columns: repeat(4, 1fr);">
  <x-table-cell col-span="2">Spans two columns</x-table-cell>
  <x-table-cell>Col 3</x-table-cell>
  <x-table-cell>Col 4</x-table-cell>
</div>

Sticky first column

<x-table-cell sticky="start"
              style="--x-table-cell-sticky-bg: #fff;">
  Row label
</x-table-cell>

Custom sort icon via slot

<x-table-cell type="header" sortable>
  Status
  <svg slot="sort-icon" width="16" height="16" viewBox="0 0 16 16">
    <path d="M8 4l4 8H4l4-8z" fill="currentColor"/>
  </svg>
</x-table-cell>

JavaScript API

const cell = document.querySelector('x-table-cell');

// Property access
cell.type = 'header';
cell.sortable = true;
cell.sortDirection = 'asc';
cell.colSpan = 2;
cell.disabled = false;

// Events
cell.addEventListener('x-table-cell-sort', (e) => {
  cell.sortDirection = e.detail.direction;
});

ClojureScript / Hiccup

[:x-table-cell {:type "header" :sortable "" :sort-direction "none"
                :on-x-table-cell-sort #(set! (.-sortDirection (.-target %))
                                             (.-direction (.-detail %)))}
 "Column Name"]

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

x-table-cell

Attributes

Properties

Events

`x-table-cell-sort`

`x-table-cell-connected`

`x-table-cell-disconnected`

Slots

Parts

CSS Custom Properties

Layout

Colors

Typography

Motion

State

Accessibility

ARIA Role Mapping

`aria-sort`

`aria-disabled`

Sort Button

Keyboard

Sort Cycling

Grid Span (col-span / row-span)

Sticky Positioning

Parent Coordination Events

Examples

Basic data cell

Header cell with sort

Truncated cell

Spanning cells (in a CSS Grid row)

Sticky first column

Custom sort icon via slot

JavaScript API

ClojureScript / Hiccup

FilesExpand file tree

x-table-cell.md

Latest commit

History

x-table-cell.md

File metadata and controls

x-table-cell

Attributes

Properties

Events

x-table-cell-sort

x-table-cell-connected

x-table-cell-disconnected

Slots

Parts

CSS Custom Properties

Layout

Colors

Typography

Motion

State

Accessibility

ARIA Role Mapping

aria-sort

aria-disabled

Sort Button

Keyboard

Sort Cycling

Grid Span (col-span / row-span)

Sticky Positioning

Parent Coordination Events

Examples

Basic data cell

Header cell with sort

Truncated cell

Spanning cells (in a CSS Grid row)

Sticky first column

Custom sort icon via slot

JavaScript API

ClojureScript / Hiccup

`x-table-cell-sort`

`x-table-cell-connected`

`x-table-cell-disconnected`

`aria-sort`

`aria-disabled`