Skip to content

HyTable

A semantic, lightweight data table for standard row/column display.

Rows are passed as rows: T[] against a columns: TableColumn<T>[] definition. The component is stateless with respect to data — sorting is controlled by the consumer via the sortKey + sortDirection props; the component only emits a sort event and updates the visual indicator / aria-sort when the consumer echoes the state back.

Row density is inherited from the surrounding context — wrap a region in data-density="compact" (or comfort) to shift cell padding without passing a prop per table. There is no local size override; tables are content-dense by design.

When a consumer outgrows hy-table (virtualization, selection, column resizing, multi-sort, pinning, grouping), they swap to hy-datagrid.

Events

  • sort - TableSortDetail — fired when a sortable header is activated.

Slots

  • empty - Custom empty-state content (overrides emptyText).
  • loading - Custom loading placeholder (overrides the default skeletons).
  • header-{key} - Override a specific column's header content. Replace {key} with the column key (e.g. header-email).
  • cell-{key} - Override a specific column's cell content (static). Replace {key} with the column key (e.g. cell-status).

Built with Lit. Documented with VitePress.