Table

Generic data table with sortable, numeric-aware columns.

A semantic data table built on real `<table>`/`<thead>`/`<tbody>` markup. Columns are declared once (`label`, `align`, `numeric`, `sortable`, plus an optional `format` or custom `cell` snippet); numeric columns right-align and use the mono font. Sortable headers are real `<button>`s that toggle `asc`/`desc` and re-sort rows (numeric-aware), driving the `aria-sort` on each `<th>`. Bind `sort` to control or observe ordering, and supply an `empty` snippet for the no-data state.

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { Table } from 'dssoca';

  const columns = [
    { key: 'name', label: 'Name', sortable: true },
    { key: 'commits', label: 'Commits', numeric: true, sortable: true },
  ];
  const rows = [
    { name: 'Ada', commits: 142 },
    { name: 'Grace', commits: 213 },
  ];

  let sort = $state({ key: 'commits', dir: 'desc' });
</script>

<Table {columns} {rows} bind:sort caption="Contributors" />

Sortable header cells render a `<button>` inside the `<th>`, and the `<th>` carries `aria-sort` (ascending | descending | none). Numeric columns are right-aligned and use --ss-font-mono; rows highlight on hover via --ss-hover and the header has an --ss-line-strong bottom border. Zero border-radius throughout.

Props

Prop	Type	Default	Description
`columns`	`TableColumn[]`	—	Required. Column definitions: key, label, align, sortable, numeric, format, cell.
`rows`	`any[]`	—	Required. Row data, each keyed by column `key`.
`sort`	`{ key: string; dir: "asc" \| "desc" }`	—	Bindable active sort. Clicking a sortable header toggles asc/desc and re-sorts rows.
`onsort`	`(s: TableSort) => void`	—	Notified when the sort changes (in addition to updating the bound `sort`).
`caption`	`string`	—	Optional <caption> rendered subtly above the grid.
`empty`	`Snippet`	—	Content shown when `rows` is empty (replaces the default "No data" row).
`getRowKey`	`(row: any, i: number) => string \| number`	—	Stable key per row for keyed iteration. Defaults to the row index.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.