Cookbook / Data Table

Data Table

list

Sortable data table — derived() sorts a copy of the prop rows, each/key renders rows, click headers to toggle direction.

id
data-table
since
0.5.0
file
data-table.aihu
propstatederivedactioneachkeyon:clickinterpolation

Run it

source · static

This recipe doesn't have a hydrated island in the demo gallery yet. An in-browser, WASM-compiled playground (edit this source and re-render live) is planned as a follow-up — read the real source below.

Source

data-table.aihu

Requires

concerns
state

Anti-patterns

  • Do not sort the prop array in place — [...rows].sort() keeps the source identity stable so the derivation re-runs cleanly.

Related recipes

infinite-scrollsearch-debounce