Examples · Lists & tables

Sortable, filterable table

reactive() state with a getter for the visible rows; list() moves nodes instead of re-rendering.

State is one reactive() object. The visible rows are a getter, so sort and filter are derived, never duplicated. list() is keyed by id: sorting 200 rows moves DOM nodes, it does not rebuild them.

Playground

What to notice

  • Clicking a header toggles the field and the direction with a single write.
  • Filtering by “1” keeps identity: rows that stay are the same DOM nodes.
  • The getter runs lazily and is cached until rows, q or the sort changes.

Filter by “1”, then sort by price.