# Migrating from Glide Data Grid Glide Data Grid is the canvas-rendered, ultra-high-performance choice for very wide datasets (100k+ rows, 100+ columns). Sv-grid renders to DOM with virtualization, which trades peak FPS for accessibility + standards-compliant HTML. > Estimated effort: **3-6 hours** per grid. Glide's getCellContent / > onCellEdited cell-data model is the opposite of sv-grid's > data-array model; the mental flip takes the most time. > **Facts, checked 12 Sep 2026.** `@glideapps/glide-data-grid` 6.0.3, MIT, last published 3 Feb 2024, 1,180,000 npm downloads in the 30 days to 10 Sep 2026. `@svgrid/grid` 3.0.3, MIT, last published 11 Sep 2026, 16,900 npm downloads in the same window. Bundle, minified and gzipped, each package built alone with Svelte external: SvGrid 3.0.4 97.6 KB JS + 10.5 KB CSS (measured 22 Sep 2026); `@glideapps/glide-data-grid` 6.0.3 71.1 KB JS + 0.2 KB CSS, lodash + marked + react + react-dom + react-responsive-carousel external (measured 12 Sep 2026). Glide Data Grid pricing, as its site states it: Glide Data Grid is MIT and, in its own words, fully free and open source; no licence is sold for the grid (https://grid.glideapps.com/, read 12 Sep 2026). SvGrid: MIT core; @svgrid/enterprise from $299 per developer per year (Indie, under $1M revenue), $599 for Enterprise. Side by side, with sources: [SvGrid vs Glide Data Grid](https://svgrid.com/compare/glide-data-grid/). ## Mental-model flip Glide gives you a **canvas + a `getCellContent` callback**: the grid asks you for each visible cell on demand. Sv-grid wants the **whole data array up front** (``); the engine slices for virtualization. The example at the end of this page runs against these rows: ```svelte ``` ```diff - function getCellContent([col, row]) { - const r = rows[row] - if (col === 0) return { kind: 'text', data: r.name, displayData: r.name, allowOverlay: true } - if (col === 1) return { kind: 'number', data: r.amount, displayData: fmt(r.amount), allowOverlay: true } - } - + const columns: ColumnDef[] = [ + { field: 'name', header: 'Name', editorType: 'text' }, + { field: 'amount', header: 'Amount', editorType: 'number', + format: { type: 'currency', currency: 'USD' } }, + ] + ``` This change is **good** for 99% of apps: it's less code, less risk of typos in cell coordinates, full TypeScript type checking on the row shape. For the 1% of apps with rows that don't fit in memory, see "Out-of-memory data" below. ## Cell editing ```diff - function onCellEdited([col, row], newValue) { - rows[row] = { ...rows[row], [colToField(col)]: newValue.data } - } - + { + rows[e.rowIndex] = { ...rows[e.rowIndex], [e.columnId]: e.newValue } + }} + /> ``` You can also rely on sv-grid's built-in write-back if `data` is a Svelte 5 `$state` array - mutations propagate automatically. ## Sorting + filtering Glide doesn't ship sort / filter UI; you wrap your own. Sv-grid ships them: ```diff - // Build your own sort buttons in the toolbar; sort rows yourself. + const features = tableFeatures({ rowSortingFeature, columnFilteringFeature }) + ``` ## Frozen columns / row markers | Glide | sv-grid | | -------------------------------------- | --------------------------------------------- | | `freezeColumns={1}` | `api.setColumnPinning({ left: ['firstColId'] })` | | `rowMarkers="number"` | `showRowNumbers={true}` prop | | `rowMarkers="checkbox"` | `selectionMode="row"` prop | ## Custom drawing → custom snippets Glide's `drawCustomCell` lets you render anything via canvas. The sv-grid equivalent is a Svelte snippet (DOM): ```diff - drawCustomCell(args) { - const ctx = args.ctx - ctx.fillStyle = args.cell.data.color - ctx.fillRect(args.rect.x, args.rect.y, args.rect.width, args.rect.height) - return true - } + { + field: 'color', + cell: (ctx) => renderSnippet(ColorChip, { color: ctx.row.original.color }), + } ``` ```svelte {#snippet ColorChip(props)} {/snippet} ``` ## Out-of-memory data For "10M rows, fetched on scroll" workloads (the only case Glide genuinely beats sv-grid on), use sv-grid's [server-side / infinite-scroll pattern](https://svgrid.com/docs/help/server-side-data/): ```svelte { loadedSlice = await fetchPage({ sort: s, offset: 0, limit: 200 }) }} /> ``` You'll cap practical perf at ~100k rendered rows; for true 10M+ datasets Glide's canvas approach has a perf edge sv-grid won't match. Most apps don't need 10M rows on screen at once - they need fast server-side filtering, which both libraries support equally. ## Theming Glide: huge `theme` prop object. Sv-grid: CSS custom properties (`--sg-*`). ```diff - +
+ +
``` See [design tokens](https://svgrid.com/docs/help/tokens/) for the full list (≤ 30 tokens covers everything; Glide's theme has ~40). ## What you get for free vs Glide - **Accessibility.** Glide's canvas is invisible to screen readers unless you build an off-screen ARIA buffer. Sv-grid is WAI-ARIA 1.2 grid pattern out of the box; demo 17 covers axe-core CI. - **Standard HTML.** SEO crawlers, browser Find-in-Page, browser zoom, OS-level text scaling - all work because the grid emits actual `
`. - **Familiar editing.** Browser-native `` / `