Data

Table

Data-driven HTML table with sticky header, sortable columns, and striping options. For richer interactions use DataTable (later wave).

Examples

Sortable


The Selfish Gene	Dawkins	360
Gödel, Escher, Bach	Hofstadter	777
Thinking, Fast and Slow	Kahneman	499
The Code Book	Singh	432

<Table
  columns={[
    {key: 'title', label: 'Title', sortable: true},
    {key: 'author', label: 'Author', sortable: true},
    {key: 'pages', label: 'Pages', align: 'right', sortable: true},
  ]}
  rows={books}
  bind:sort
  striped
/>

Props

Prop	Type	Default	Description
`columns`	`{key, label, align?, width?, sortable?}[]`	`—`	Column definitions.
`rows`	`Record<string, unknown>[]`	`—`	Row data (looked up by column key).
`sort`	`{key, dir} \| undefined`	`—`	Bindable sort state.
`striped`	`boolean`	`false`	Zebra rows.
`hoverable`	`boolean`	`true`	Highlight on hover.
`density`	`'compact' \| 'comfortable'`	`'comfortable'`	Cell padding tier.

Install

CLI

npx @a3tai/mittsu add table