# Recipes / Cookbook Quick patterns for the questions that come up over and over. Each recipe is paired with a live demo or a minimal snippet that runs against the shipping library. ## Sort, filter, paginate at the same time Three of the most-asked features wired together against a 5k-row dataset. Click any header to sort, open the filter icon to filter, use the pager at the bottom to walk pages: > Live demo: Sort, filter, paginate - https://svgrid.com/demos/02-sort-filter-paginate/ The implementation: register all three features in one `tableFeatures(...)` call and enable the matching props on ``. See [Filtering overview](https://svgrid.com/docs/help/filtering/overview/) and [Row sorting](https://svgrid.com/docs/help/rows/row-sorting/). ## Select rows + copy / paste a range Click + drag selects a rectangular cell range; Ctrl/Cmd+C copies as TSV; pasting back from Excel writes through the same cell-write pipeline as inline edit: > Live demo: Selection + copy/paste - https://svgrid.com/demos/04-selection-copy-paste/ The pattern: enable `enableCellSelection={true}` and let the grid handle the keyboard + paste plumbing. Cell writes go through `onCellValueChange` so your validator runs on every pasted value. ## Bulk actions toolbar The Gmail / Linear pattern: tick row checkboxes, a sticky toolbar reveals "Mark / Delete / Copy as TSV": > Live demo: Bulk actions toolbar - https://svgrid.com/demos/23-bulk-actions/ The trick: subscribe to `onRowSelectionChange` and render your toolbar whenever the count is > 0. The grid doesn't ship a bulk-action component on purpose - your design system's button + toast UI is better than anything we could embed. ## Cascade editing (formula-like dependencies) Editing qty / price cascades into line totals + a summary card: > Live demo: Cascade editing - https://svgrid.com/demos/18-cascade-editing/ In `onCellValueChange`, after writing the cell, recompute the dependent cells in the same row (or in the summary state) and let Svelte 5's reactivity carry the update through. The pattern is essentially "editable cells + a `$derived` summary". ## Validation while editing Per-column rules: invalid commits get rolled back via `setCellValue`, and a sidebar logs the rejection so users can audit what was tried: > Live demo: Validation while editing - https://svgrid.com/demos/24-validation/ Use `onCellValueChange`: validate, and if invalid, call `api.setCellValue(rowIndex, columnId, oldValue)` to undo. The grid emits a fresh `onCellValueChange` for the undo write that your validator can recognise and skip. ## Column pinning + freezing Wide 13-column grid: pin Company on the left and Price on the right; the middle scrolls under sticky edges: > Live demo: Column pinning + freezing - https://svgrid.com/demos/25-column-pinning/ The user pins via the column menu - no extra wiring needed if `columnFilteringFeature` is registered (the menu lives on the same header button). Or set the whole pinning state programmatically with `api.setColumnPinning({ left: ['name'], right: ['total'] })` - pass an empty array for a side to unpin it. `api.getColumnPinning()` reads it back for persistence. ## List + chips editors The two built-in multi-select editors: > Live demo: List + chips editors - https://svgrid.com/demos/26-list-chips-editors/ Add `editorType: 'list'` for a single `` or `editorType: 'chips'` with `editorMultiple={true}` for removable tokens. Pass static `editorOptions` or a `(row) => options` callback for cascading lists (e.g. City options depend on Country). ## Spreadsheet ribbon An Excel-style Ribbon UI driving the grid via `SvGridApi`: bold + colour + number format + insert/delete row + sort, plus a live SUM/AVG/COUNT status bar: > Live demo: Spreadsheet + Ribbon bar - https://svgrid.com/demos/27-spreadsheet-ribbon/ The ribbon is a regular Svelte component; every button calls `api.setCellValue`, `api.addRow`, `api.setSort`, etc. Status bar reads `getDisplayedRows()` for the live aggregate. ## Master / detail A hierarchical row that expands to reveal a child grid: > Live demo: Tree + master/detail - https://svgrid.com/demos/08-tree-and-master-detail/ Same flatten pattern as [tree rows](https://svgrid.com/docs/help/rows/tree-rows/): a flat `visibleRows` derivation, plus a custom cell snippet that renders the detail grid inline when the row is expanded. ## Forms-in-grid (master grid + side form) Click a row to load it into a tabbed detail form on the right; edits flow back to the grid live: > Live demo: Forms-in-grid (master/detail) - https://svgrid.com/demos/40-forms-master-detail/ Pattern: `onActiveCellChange` -> set `activeRowId` -> `draft = $state.snapshot(activeRow)` -> form binds against `draft`. On save, write `draft` back into the rows array. **Use `$state.snapshot()`, not `structuredClone()`**, on Svelte 5 state proxies - the latter throws `DataCloneError`. ## Saved views / persistence Pivot-lite with chips + saved views stored in localStorage: > Live demo: Reporting workspace - https://svgrid.com/demos/36-reporting-workspace/ The pattern: a `view: { groupBy, sortBy, filters, columns }` object that you serialise into localStorage under a versioned key (`'my-app:view:v1'`). On load, hydrate the state from the saved view and call the matching `api.set*` methods. ## Theming studio Live token playground: brand color, density, radius, font, dark/light, zebra. The CSS snippet at the bottom is copy-ready: > Live demo: Theming studio - https://svgrid.com/demos/37-theming-studio/ Theming is `--sg-*` custom properties - see [Tailwind integration](https://svgrid.com/docs/help/tailwind/) for the full token list. ## Localisation + RTL switching Six locales (en, de, fr-CA, ja, ar, he); headers, currencies, dates, and the grid's own scrollbar flip: > Live demo: RTL + i18n stress - https://svgrid.com/demos/38-rtl-i18n/ Set `` and `` based on the locale. Per-column `format: { type: 'currency', locales }` overrides the document locale for specific columns. ## Print + boardroom export Quarterly P&L print pack: cover page, repeat-on-page headers, page- size + orientation, CSV / HTML download, browser-native PDF: > Live demo: Print + boardroom export - https://svgrid.com/demos/39-print-board-export/ `api.print({ title, columns, rows, orientation, pageSize })` opens a sandbox window with an isolated HTML document and calls `.print()` on it. The popup pattern is what isolates your print stylesheet from your app's CSS. ## Healthcare EMR (role-based editing) Inpatient board with vitals sparklines, risk score, code status, allergy chips, role-based editing (viewer / nurse / physician / admin): > Live demo: Healthcare EMR - inpatient - https://svgrid.com/demos/41-healthcare-emr/ The role gate uses `editable: (ctx) => roleCanEdit(currentRole, ctx.column.id)`. That lambda runs per-cell, so you get column + role granularity without a separate config table. ## Live shipment / fleet board Streaming-style live update at 2-3 Hz with cell-level flash on change, ETA delta colors, alert chips: > Live demo: Logistics - live fleet ops - https://svgrid.com/demos/42-logistics-fleet/ The pattern: a `$state` rows array that you mutate from a WebSocket/SSE handler. The render component diffs at the data-array level, so reassigning the array (`rows = updated`) is what triggers the visible repaint. ## Compliance / approval queue L1 / L2 / L3 approval chain with live SLA timer, role-gated approve / return / reject buttons, immutable case-history audit panel: > Live demo: Compliance / regulatory queue - https://svgrid.com/demos/43-compliance-queue/ This is the pattern for any "this row needs a decision; some users can make it, some can't" workflow. Status changes go through a state machine you own; the grid only renders the current state. ## Field service dispatch Dispatcher board: priority + status + tech editable inline, SLA tone gauge, today-timeline cell, tech capacity panel, live status stream: > Live demo: Field service dispatch - https://svgrid.com/demos/44-field-service/ Same `editable: (ctx) => ...` per-cell pattern for tech/status. The today-timeline cell is a positioned-bar in a single wide cell - see the [pivot doc](https://svgrid.com/docs/help/pivot/) for that pattern. ## Gantt chart in a grid Project plan with a wide custom Schedule cell: bars positioned by start/end %, phase coloring, progress fill, today line, overdue glow: > Live demo: Gantt chart - https://svgrid.com/demos/45-gantt-chart/ No special Gantt mode - it's a single wide cell per row whose snippet positions absolute bars by `(start - projectStart) / projectSpan * 100`. Axis above the grid uses the same math. For a real plan - a work-breakdown tree with rolled-up phases, dependency arrows and a zoomable axis - use [Gantt chart mode](https://svgrid.com/help/rows/gantt), the `gantt` prop's Enterprise renderer, rather than building on this recipe. ## Scheduler (single-day appointments) Providers as rows, an hour axis, click any appointment to edit it in the side panel. Now-line ticks live: > Live demo: Clinic day scheduler - https://svgrid.com/demos/46-scheduler/ Same single-wide-cell pattern as the Gantt. The axis-wrap inside the grid wrapper uses `ResizeObserver` so the axis width matches the schedule column - that's what keeps the now-line aligned between the header and the cells. ## Trash truck timeline (animated) Public-works dispatcher: each truck glides along its day-long route with spinning wheels, stops, and live fill levels: > Live demo: Trash truck timeline - https://svgrid.com/demos/47-trash-truck-timeline/ The mover uses `transition: left 220ms linear` so the new position animates in. The bounce + wheel spin are CSS keyframes; no JS animation loop required. ## CRM - sales pipeline Deal board with stage chips, weighted forecast bar, inline stage + probability editing, deal detail aside with activity feed: > Live demo: CRM - sales pipeline - https://svgrid.com/demos/48-crm-sales-pipeline/ This is the canonical example of mixing inline edit + a side panel that mirrors the active row. ## Enterprise admin dashboard CRUD-heavy users board: inline role / status / MFA edit, bulk activate / deactivate / delete, invite dialog, permissions matrix, live audit log: > Live demo: Admin dashboard - https://svgrid.com/demos/49-admin-dashboard/ The audit log is the recurring pattern: every mutation appends an entry to a `$state` array; the right-side panel renders the array. Delete + Invite use simple `

`-style modals. ## E-commerce seller panel Tabbed Amazon-seller view: catalog with SVG thumbnails, inventory bars vs reorder threshold, live orders pipeline, pricing rules: > Live demo: Seller panel - e-commerce - https://svgrid.com/demos/50-seller-panel/ The tab strip is just chip buttons that swap which dataset / columns the grid receives. One grid component, four tabs - share styling and behavior without four separate mounts. ## Long-form recipes The recipes above pair a paragraph + a demo. These deeper write-ups have their own pages: - [Persist column layout to URL](https://svgrid.com/docs/recipes/persist-column-layout-to-url/) - sort + filter + page in the URL, with debounced replaceState and restore-on-mount. - [Two-grid master / detail](https://svgrid.com/docs/recipes/two-grid-master-detail/) - one master grid drives a second detail grid; remount semantics and multi-select union. - [Bulk-edit selected rows](https://svgrid.com/docs/recipes/bulk-edit-selected-rows/) - the standard back-office workflow: pick a field, pick a value, apply to N selected rows. Includes optimistic + rollback patterns. - [Server-side filter with TanStack Query](https://svgrid.com/docs/recipes/server-side-filter-with-tanstack-query/) - caching, deduplication, cancellation, retries, optimistic edits via mutations. ## See also - [Architecture overview](https://svgrid.com/docs/help/architecture/) - the layered model that makes these recipes composable. - [API reference](https://github.com/sv-grid/sv-grid/blob/main/docs/reference/index.md) - every method called in the recipes above. --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/recipes/ . All docs: https://svgrid.com/llms.txt