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.
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,qor the sort changes.
What this replaces: x-for over a filtered getter in Alpine, computed + v-for in Vue, useMemo + .map() in React; DataTables on a jQuery page.
Filter by “1”, then sort by price.