# Styling a headless table With the headless engine you render your own markup, so **you own every pixel of styling** - there is no grid stylesheet to fight. The same `createSvGrid` engine can drive a minimal underlined table, a fully bordered grid, or floating row cards. Flip the controls in the demo; the engine and rows are identical, only the CSS changes. > Live demo: Styling a headless table - https://svgrid.com/demos/188-headless-styled/ ## The mindset The engine hands you `getHeaderGroups()` and `getRowModel().rows`; how you turn them into DOM - ``, CSS grid, flexbox, divs - and how you style them is entirely yours. Nothing below is prescribed; it's just what the demo does. ## Track the site theme with `--sg-*` tokens The grid's theming is a set of CSS custom properties (`--sg-bg`, `--sg-fg`, `--sg-border`, `--sg-header-bg`, `--sg-muted`, `--sg-accent`, …). Use the same tokens in your headless CSS and your table automatically follows the app's light / dark theme and any per-instance overrides - no extra work. ```css .my-table { color: var(--sg-fg, #0f172a); font-size: 13px; } .my-table th { background: var(--sg-header-bg, #f1f5f9); border-bottom: 2px solid var(--sg-border, #e2e8f0); } .my-table td { border-bottom: 1px solid var(--sg-border, #eef2f7); } ``` Always keep a literal fallback (`var(--sg-fg, #0f172a)`) so the table is styled even outside a themed container. See [Tailwind & theming](https://svgrid.com/docs/help/tailwind/) for the full token list. ## The usual affordances These are one CSS rule each - the engine doesn't need to know about them. ```css /* Zebra striping */ .my-table tbody tr:nth-child(even) td { background: color-mix(in oklab, var(--sg-muted) 8%, transparent); } /* Hover */ .my-table tbody tr:hover td { background: color-mix(in oklab, var(--sg-accent, #6366f1) 8%, transparent); } /* Sticky header inside a scroll container */ .my-table thead th { position: sticky; top: 0; z-index: 1; } /* Right-align numbers */ .my-table td.num { text-align: right; font-variant-numeric: tabular-nums; } /* Density: swap a class */ .dense th, .dense td { padding: 5px 10px; } ``` ## Sort affordance Sorting is engine state, but the **indicator** is your markup - render it off the `sorting` state you already control: ```svelte ``` ## Prefer Tailwind? Use classes instead of CSS Because it's your markup, utility classes work exactly as they would on any `

toggleSort(h.column.id)}> {h.column.columnDef.header} {#if sorting[0]?.id === h.column.id} {sorting[0].desc ? '▼' : '▲'} {/if}

` - no wrapper, no `:global`: ```svelte

{#each headers as h} {/each} {#each rows as r} {/each}

{h.column.columnDef.header}

``` ## A styled table, end to end Everything above, applied at once: tokens with literal fallbacks, zebra striping, a sticky header, right-aligned numerals. The engine below is the same five lines as the unstyled version. ```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} {#if sorting[0]?.id === h.column.id} {sorting[0].desc ? 'v' : '^'} {/if}
{repo.name}	{repo.lang}	{repo.stars.toLocaleString()}

``` ## Same engine, no table at all The strongest argument for headless is that the row model does not care what you render. Identical `createSvGrid` call, identical rows - cards instead of a ``. A grid component cannot do this without a card mode; here it is just different markup. ```svelte

{#each rows as r (r.id)} {@const repo = r.original as Repo}

{repo.name}

{repo.lang}

{repo.stars.toLocaleString()} stars

{/each}

``` ## Your design system's table primitives If your team already has `Table` components - shadcn-svelte's `Table.Root` / `Table.Row` / `Table.Cell`, or your own - the engine slots under them unchanged. The header loop and the row loop are the same as above; only the elements differ. This is the layout the [shadcn data-table migration](https://svgrid.com/docs/help/migrating-from-shadcn-data-table/) lands on when it keeps the shadcn markup and swaps the engine. ```svelte {#each table.getHeaderGroups() as hg (hg.id)} {#each hg.headers as h (h.id)} {h.column.columnDef.header} {/each} {/each} {#each rows as r (r.id)} {r.original.status} {r.original.email} {r.original.amount.toLocaleString()} {/each} ``` Nothing from `@svgrid/grid` reaches the DOM here: no stylesheet, no class names, no `--sg-*` variable unless you choose to read one. The design system owns the markup and the engine owns the state, which is the split a design-system team usually wants. ## Keyboard navigation and ARIA Headless does not mean you lose the grid semantics; it means you apply them. The engine keeps an `activeCell` in its state and moves it with `moveActiveCell({ rowDelta, colDelta })`, and `@svgrid/grid/core` exports the WAI-ARIA attribute factories the render component uses, as plain objects to spread onto your own elements. Wire the four of them and arrow keys, `Home`, `End`, `aria-sort` and `aria-activedescendant` all work on a bare `

`. ```svelte

{#each table.getHeaderGroups() as hg (hg.id)} {#each hg.headers as h (h.id)} {/each} {/each} {#each rows as r, ri (r.id)} {#each columns as c, ci (c.field)} {@const selected = active.rowIndex === ri && active.colIndex === ci} {/each} {/each}

{h.column.columnDef.header}
table.setActiveCell({ rowIndex: ri, colIndex: ci, cellId: `${ri}_${c.field}` })} > {String(r.original[c.field as keyof Repo])}

``` Click a cell, then use the arrow keys. The root carries `role="grid"`, `tabindex="0"` and `aria-activedescendant`; each header carries `aria-sort`; each cell carries `role="gridcell"`, `aria-rowindex`, `aria-colindex` and `aria-selected`. Screen readers announce the same grid the render component would. What you still own: focus styling, `Enter` to edit if you add editing, and `Tab` to leave the grid (the browser handles that one because the cells themselves are not focusable). ## See also - [Build a table from scratch](https://svgrid.com/docs/help/headless/build-a-table/) - the render loop - [Headless virtualization](https://svgrid.com/docs/help/headless/virtualization/) - style a virtualized list - [Tailwind & theming tokens](https://svgrid.com/docs/help/tailwind/) - the `--sg-*` reference - [Migrating from the shadcn-svelte data table](https://svgrid.com/docs/help/migrating-from-shadcn-data-table/) - keep the shadcn markup, swap the engine - [Keyboard and accessibility](https://svgrid.com/docs/help/accessibility/) - what the render component does, for parity --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/headless/styling/ . All docs: https://svgrid.com/llms.txt