Data Display

Table

A styled native <table> with striping and hover.

stableCSS onlyEnhancer: enhanceTableBuilt on <table>hydrateless/table.css

A styled native <table> with optional zebra striping, row hover, cell alignment, and density. Apply the class to standard table markup and wrap it in .hl-table-wrapper to scroll horizontally on narrow screens. The layout is CSS-only; add data-hl-table and mark headers data-hl-sort and the optional enhancer sorts rows client-side with aria-sort.

Playground

Live

Name	Role	Commits
Ada Lovelace	Engineer	128
Alan Turing	Researcher	96
Grace Hopper	Compiler	204

StripedRow hoverSizesmmdlg

Sortable

Headers with data-hl-sort become buttons that cycle ascending and descending. Cells sort by data-hl-value when present (here, the ISO date) and by text otherwise, numerically when both sides are numbers. data-hl-default-value picks the initial sort without any script.

Live

Name	Role	Joined	Commits
Ada Lovelace	Engineer	Mar 2021	128
Alan Turing	Researcher	Nov 2019	96
Grace Hopper	Compiler	Jun 2020	204

JavaScript

This component ships an optional enhancer. With auto-init it loads automatically; to wire it yourself, import it directly:

import { enhanceTable } from '@hydrateless/enhancers/table';

const handle = enhanceTable(document);
// handle.api  -> imperative controls
// handle.destroy()  -> tear everything down

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
striped	boolean	false	Zebra-stripe body rows; renders `data-hl-striped`.
hover	boolean	false	Highlight the hovered row; renders `data-hl-hover`.
align	'start' | 'center' | 'end'	'start'	Default cell alignment; renders `data-hl-align`. Override per cell with the same attribute.
size	'sm' | 'md' | 'lg'	'md'	Cell padding density; renders `data-hl-size`.

Events and callbacks

Event / Callback	Payload	Description
hl:change	{ value: { column: string; direction: 'ascending' | 'descending' } | null }	Fires after an enhanced table is re-sorted; `null` means authored order (also the `onValueChange` callback).

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-border	Row dividers.
--hl-surface-2	Striped and hovered row background.
--hl-fg-muted	Header text color.

Accessibility

• A native <table> with <thead> and <th scope="col"> exposes column structure to assistive tech.
• Striping and hover are purely visual; they never replace real headers or captions.
• The .hl-table-wrapper scrolls horizontally instead of clipping columns on narrow viewports.
• Sortable headers are focusable, respond to Enter and Space, and expose the active order through aria-sort.

Related

CardA surface for grouping related content.PaginationPage navigation with first/last and ellipsis truncation.