# Migrating from Tabulator Tabulator is a feature-rich vanilla-JS table you instantiate against a DOM element and drive imperatively (`table.setData(...)`, `table.on('cellEdited', ...)`). SvGrid covers a similar feature surface but as a Svelte 5 component: data is a reactive `$state` array, custom cells are snippets, and there is no manual mount / teardown. > Estimated effort: **2-4 hours** per grid - column translation plus > swapping imperative `setData` for reactive state. > **Facts, checked 12 Sep 2026.** `tabulator-tables` 6.5.2, MIT, last published 23 Jun 2026, 672,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.27 99.7 KB JS + 11.3 KB CSS (measured 28 Oct 2026); `tabulator-tables` 6.5.2 106.9 KB JS + 3.8 KB CSS (measured 12 Sep 2026). Tabulator pricing, as its site states it: Tabulator is MIT and free; no licence or support plan is sold (https://github.com/olifolkerd/tabulator, 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 Tabulator](https://svgrid.com/compare/tabulator/). ## Vocabulary cheat sheet | Tabulator | sv-grid | | -------------------------------------- | ----------------------------------------- | | `new Tabulator(el, { data, columns })` | `` | | `{ title: 'Name', field: 'name' }` | `{ header: 'Name', field: 'name' }` | | `formatter: fn` / `formatter: 'money'` | `cell: (c) => renderSnippet(...)` or `format` | | `editor: 'input' / 'number' / ...` | `editorType: 'text' / 'number' / ...` | | `headerFilter: true` | `columnFilteringFeature` | | `dataTree: true` | `rowExpandingFeature` + tree row shape | | `table.setData(rows)` | reassign the `$state` data array | | `table.on('cellEdited', ...)` | `onCellValueChange` | | `table.setSort(field, dir)` | `api.setSort(field, dir)` | | `layout: 'fitColumns'` | `fitColumns` prop | ## Before / after The example at the end of this page runs against these rows: ```svelte ``` ```diff - import { TabulatorFull as Tabulator } from 'tabulator-tables' - - const table = new Tabulator('#grid', { - data: rows, - layout: 'fitColumns', - columns: [ - { title: 'Name', field: 'name' }, - { title: 'Amount', field: 'amount', formatter: 'money', editor: 'number' }, - ], - }) - table.on('cellEdited', (cell) => save(cell.getData())) + + + save(e)} /> ``` ## What changes - **Imperative → reactive.** No `setData()` - reassign the `$state` array and the grid updates. - **String formatters → snippets.** Custom cells are Svelte snippets / components, not HTML-string formatters. - **Mount / teardown disappears.** No `new Tabulator(el)` and no manual destroy on unmount. ## Frequently asked questions ### Is migrating from Tabulator to SvGrid hard? It is a configuration translation plus one mindset shift: you stop calling `setData()` and instead let a reactive `$state` array drive the grid. Budget 2-4 hours per grid. ### Is SvGrid free like Tabulator? Yes. `@svgrid/grid` is MIT-licensed like Tabulator. The optional `@svgrid/enterprise` pack (export, import, pivot, AI) is the only paid piece. ### Can I keep Tabulator's custom formatters? You re-create them as Svelte snippets via `renderSnippet`. Any Svelte component or markup works, not just an HTML string. ## What you end up with Sort, filter and edit, with pagination underneath. ```svelte ``` ## See also - [SvGrid vs Tabulator](https://svgrid.com/compare/tabulator/) - the side-by-side comparison - [Cell components](https://svgrid.com/docs/help/cells/cell-components/) - snippet-based custom cells - [Architecture](https://svgrid.com/docs/help/architecture/) - engine + render-component split --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/migrating-from-tabulator/ . All docs: https://svgrid.com/llms.txt