SvGrid Tips and Tricks: Get More from Your Svelte Data Grid
Practical SvGrid tips - fitColumns, cellFlash, Kanban board mode, server-side data, theming tokens and headless rendering - each with a code snippet and docs link.
SvGrid does a lot with very few props. These are the tips that most often make people say "it can do that?" - from filling the viewport to live cell flashes, Kanban board mode, and dropping to the headless core. Each one is a one-liner you can paste in today.
Fill the viewport with fitColumns
fitColumns sizes columns to the available width and only falls back to a horizontal scrollbar when it would shrink columns below ~85% of their natural width.
<SvGrid {data} {columns} fitColumns />
Flash a cell when its value changes
Perfect for streaming feeds and server pushes. It respects prefers-reduced-motion out of the box.
columns: [{ field: 'price', cellFlash: true }]
Persist edits with onCellValueChange
Use it to POST the change, trigger a cascading recompute, or optimistic-update your store. It fires only after the edit commits.
<SvGrid onCellValueChange={(e) => save(e.row)} />
Turn the grid into a Kanban board
Board mode is a rendering of the same rows, so filters, sorting, and search carry straight over. Drag works with mouse and keyboard.
<SvGrid {data} {columns} board={{ groupBy: 'status' }} />
Own the data pipeline with externalSort/Filter
Pair them with onSortingChange / onFiltersChange to get the consolidated state, fetch, and hand back the new rows. The backbone of server-side data.
<SvGrid externalSort externalFilter
onSortingChange={load} onFiltersChange={load} />
Theme the grid with --sg-* tokens
No theme API to learn: the grid ships complete chrome driven by tokens, and your overrides always win. 20+ ready-made themes ship in the box.
:root { --sg-accent: #ff3e00; }
[data-theme='dark'] { --sg-bg: #0e1730; }
Render your own cells, keep the engine
The full component is a render layer over a headless core. Drop down to the core when a design system needs to own the DOM.
const grid = createSvGrid({ data, columns })
// render grid.rows yourself
Add a row-number column with one prop
Handy for spreadsheets and audit views where users refer to rows by position.
<SvGrid {data} {columns} showRowNumbers />
Chart a selection without a chart library
SvGridChart reads the current selection and renders directly, so exploratory charts are one interaction away.
import { SvGridChart } from '@svgrid/grid'
Make the grid phone-friendly with responsive
Combine it with per-column hideBelow to drop low-priority columns on narrow viewports instead of cramming everything in.
<SvGrid responsive columns={[{ field: 'notes', hideBelow: 640 }]} />
Turn on features with one boolean each
The shortcut props wire the underlying feature for you, so you can start minimal and switch on exactly what a grid needs, one word at a time.
<SvGrid {data} {columns} sortable filterable editable pageable />
Pick your filter surface with filterMode
Set filterMode="row" for a spreadsheet-style filter row, "global" for one search box, or "menu" (default) for the in-header filter section.
<SvGrid {data} {columns} filterable filterMode="row" />
Group rows and roll up totals
Row grouping plus aggregation gives you subtotals and counts per group out of the box, and users can regroup at runtime by dragging columns.
<SvGrid {data} {columns} groupable />
Server-side paging without fighting the grid
The grid stops slicing local data and treats what you pass as the current page. Pair it with externalSort/externalFilter for a fully server-driven grid.
<SvGrid {data} externalPagination {rowCount} {pageIndex}
onPaginationChange={load} showPagination />
Export the grid from the API
Exports honor the live view, not just the raw data. For an in-grid button with format options, drop in the SvExportMenu component from the enterprise package.
api.exportCsv({ fileName: 'orders.csv' }) // exportTsv(), exportJson() too
Pin totals rows to the bottom
Great for summary/total rows that must never scroll away. They keep their own styling and sit outside the virtualized data area.
<SvGrid {data} {columns} pinnedBottomRows={[totalsRow]} />
Render the same rows as a calendar
Like board mode, the scheduler is another view of the same data: map a start (and optional end/title) field and the grid does the calendar layout.
<SvGrid {data} scheduler={{ startField: 'start', titleField: 'title' }} />
Pivot with a drag-and-drop designer
It ships in the enterprise package and drives the same grid, so your themes and formatting carry over into the pivot view.
import { SvPivotDesigner } from '@svgrid/enterprise'
Go deeper
Every tip above links to its full documentation. Start with the getting-started guide or browse the 150+ live examples.
Related reading
- SvGrid UI Components Tips and Tricks: Svelte 5 Buttons, Inputs, Tree, Forms
- SvGrid Studio Tips and Tricks: Build Svelte Data Apps, Fast
- Svelte 5 Tips and Tricks: Runes, Snippets, and More
- Svelte Data Grid Guides and Tutorials
- Evaluating SVAR Svelte DataGrid? What Changes if You Pick SvGrid
Tagged: Tutorials