# Build a table from scratch This is the whole point of headless: the engine computes the rows, **you** emit the markup. Here's a complete, sortable, filterable `` in one Svelte component - no ``, no grid CSS. > Live demo: Headless -> your own table - https://svgrid.com/demos/186-headless-table/ ## 1. Wire the engine When you bypass `` you opt into the row models you want. `` does this for you; here you do it explicitly. ```svelte ``` ## 2. Render it - any markup you like ```svelte {#each headerGroups as hg (hg.id)} {#each hg.headers as h (h.id)} {/each} {/each} {#each rows as r (r.id)} {#each columns as col (col.field)} {/each} {/each}

toggleSort(h.column.id)} style="cursor:pointer"> {h.column.columnDef.header}{indicator(h.column.id)}
{(r.original as Repo)[col.field as keyof Repo] ?? ''}

``` That's a fully working sortable + filterable grid - the engine did the sorting and filtering, your 20 lines of template did the rendering. Style the `` however you want; the engine has no opinion. ## What just happened - **`_rowModels`** declared the pipeline: core → filtered → sorted. Skipping grouping and pagination means that code never ships. - **`state` in, `onXxxChange` out**: clicking a header calls `toggleSort`, which reassigns `sorting`; the `$derived` table re-reads it and `getRowModel()` re-sorts. - **`getHeaderGroups()`** produced the header tree (a single level here; nested `columns: [...]` would produce more rows). ## The smallest thing that works Two imports, one row model, one `{#each}`. Nothing here is a grid component - ``, `` and `

` are yours, and so is every class on them. ```svelte {#each table.getHeaderGroups() as hg (hg.id)} {#each hg.headers as h (h.id)} {/each} {/each} {#each rows as r (r.id)} {@const repo = r.original as Repo} {/each} {h.column.columnDef.header} {repo.name} {repo.lang} {repo.stars.toLocaleString()} ``` ## Now make the headers sort Add the feature, add the row model, and hang `h.column.getToggleSortingHandler()` on the header. The indicator is markup you write, because the engine has no opinion about what a sorted header looks like. ```svelte {#each table.getHeaderGroups() as hg (hg.id)} {#each hg.headers as h (h.id)} {/each} {/each} {#each rows as r (r.id)} {@const repo = r.original as Repo} {/each} {h.column.columnDef.header}{arrow(h.column.id)} {repo.name} {repo.lang} {repo.stars.toLocaleString()} ``` ## See also - [Row models](https://svgrid.com/docs/help/headless/row-models/) - add pagination, grouping, expansion - [Controlled state](https://svgrid.com/docs/help/headless/controlled-state/) - lift state out of the component - [Styling a headless table](https://svgrid.com/docs/help/headless/styling/) - make it look good, your way - [Headless virtualization](https://svgrid.com/docs/help/headless/virtualization/) - do this for 100k rows - [Cell components](https://svgrid.com/docs/help/cells/cell-components/) - render snippet/component cells in your own table --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/headless/build-a-table/ . All docs: https://svgrid.com/llms.txt