TabulatorSimple Table for Vanilla JS / TypeScript

Migrate from Tabulator to simple-table-core (vanilla TypeScript)

A practical migration guide from Tabulator to simple-table-core. Modern TypeScript-first packaging, the same data shape across frameworks, and a tighter bundle.

Tabulator has been a workhorse vanilla-JS data grid for a decade. Its API is imperative, its TypeScript types are community-maintained, and its CSS / theme story is its own world.

simple-table-core is the framework-agnostic engine that powers all @simple-table/* adapters. It's authored in TypeScript (strict), ships ESM-first packaging, and exposes the same data shape that React / Vue / Angular / Svelte / Solid adapters use.

This guide walks you through swapping Tabulator for simple-table-core in a vanilla TS / web-component app.

Why migrate

  • Strict TypeScript types out of the box—no community defs.
  • Modern ESM-first packaging for Vite / esbuild / Rollup pipelines.
  • Lighter bundle and predictable styling via CSS variables.
  • Same engine and data shape across React / Vue / Angular / Svelte / Solid if you adopt a framework later.

Prerequisites

  • A bundler that supports ESM (Vite, esbuild, Rollup, Webpack 5).
  • simple-table-core installed: npm install simple-table-core.
  • TypeScript ≥ 5.0 recommended.

Install

npm install simple-table-core

API mapping cheat sheet

TabulatorSimple Table for Vanilla JS / TypeScriptNotes
new Tabulator(el, opts)new SimpleTableVanilla(el, opts)Constructor signature is similar.
data: Record<string, unknown>[]rows: Row[]See the Simple Table docs for the row shape.
columns[]defaultHeaders[]title → label; field → accessor; width unchanged.
frozen: trueHeaderObject.pinnedBuilt-in pinning, declarative on the header.
groupBy + groupHeaderRow grouping + aggregationsBuilt-in MIT grouping with aggregators.
formatter / mutatorcellRendererReturn a DOM node or a string from a render function.
Tabulator theme CSSsimple-table-core/styles.cssTheme via CSS variables.

Step-by-step migration

  1. Install simple-table-core

    Add simple-table-core to your bundler entry point. Remove tabulator-tables when the last consumer is gone.

    npm install simple-table-core
npm uninstall tabulator-tables

// main.ts
import "simple-table-core/styles.css";

  2. Update the constructor

    Replace new Tabulator(el, opts) with new SimpleTableVanilla(el, opts). The mount-point semantics are the same.

  3. Translate column definitions

    Map each Tabulator column to a HeaderObject. title → label, field → accessor, widths and pinning carry over directly.

  4. Reshape rows

    Each row needs a stable id. See the row shape in the Simple Table docs and adapt your existing data.

  5. Port formatters and mutators

    Tabulator's formatter functions become Simple Table cellRenderers. Return a DOM Node, an HTMLElement, or a string—whatever fits.

Gotchas

Imperative vs declarative
Tabulator leans imperative (table.setData, table.replaceData). Simple Table is declarative—you update the rows array on your side and the grid re-renders.
Niche Tabulator features
Print previews and built-in chart integration are Tabulator-specific. For most data-grid use cases, Simple Table covers the equivalent ground via cell renderers + grouping.

FAQ

Is the migration usually 1:1?
For typical data-grid use cases (sort, filter, paginate, group, custom cells, virtualization), yes. Edge-case features (Tabulator's print API, ajaxConfig) need a small custom layer if you depend on them.
Can I keep my existing CSS theme?
You'll re-skin via CSS variables. Tabulator-specific class names won't carry over, but the visual outcome (compact rows, alternating stripes, sticky headers) is straightforward to replicate.

Keep going