Grid.jsSimple Table for Vanilla JS / TypeScript

Migrate from Grid.js to simple-table-core (vanilla TypeScript)

A practical migration guide from Grid.js to simple-table-core. Move from a tuple-based read-only grid to a strict-typed, feature-rich engine that scales with your app.

Grid.js is a small, friendly vanilla-JS grid—great for read-only tables. Once you start needing virtualization, pinning, grouping, or inline editing, you outgrow it quickly.

simple-table-core is a TypeScript-first vanilla data grid that ships virtualization for 1M+ rows, column pinning, row grouping with aggregations, and inline editing in MIT.

This guide walks you from a Grid.js setup to simple-table-core without changing your data layer.

Why migrate

  • Move beyond Grid.js's read-only ceiling—gain inline editing.
  • Get virtualization for 100k+ rows out of the box.
  • Add column pinning, row grouping with aggregations, and tree data.
  • Get the same engine across React / Vue / Angular / Svelte / Solid if your app expands.

Prerequisites

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

Install

npm install simple-table-core

API mapping cheat sheet

Grid.jsSimple Table for Vanilla JS / TypeScriptNotes
columns: ['Name', ...]defaultHeaders: HeaderObject[]Move from tuple columns to declarative headers with accessor + label + width.
data: any[][]rows: Row[]See the Simple Table docs for the row shape.
pagination: trueBuilt-in pagination + virtualizationChoose paginated or virtualized rendering—both are first-class.
search: trueFiltering / column filtersBuilt-in column filters; combine for global search if needed.
sort: trueBuilt-in sortMulti-column sort and per-column sort directions.
Grid.js 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. Remove gridjs once you've migrated all consumers.

    npm install simple-table-core
npm uninstall gridjs

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

  2. Convert tuple columns to header objects

    Replace Grid.js's columns: ['Name', 'Email'] with HeaderObject entries containing accessor + label + width.

  3. Convert tuple rows to objects

    Convert each row tuple into an object with the field names you'll reference in your column accessors. See the row shape in the Simple Table docs.

  4. Replace pagination/search/sort flags

    Grid.js's boolean flags become explicit Simple Table props. Keep what you need; drop what you don't.

  5. Add advanced features

    Once stable, layer on column pinning, row grouping with aggregations, and inline editing—they're built-in.

Gotchas

Tuple → object data shape
Grid.js accepts tuple data; simple-table-core uses object rows. The transform is straightforward but unavoidable.
Grid.js plugins
Plugins like gridjs-selectable map onto Simple Table's selection props. Open an issue if you depend on a specific plugin and we'll point you at the equivalent.

FAQ

Why move off Grid.js?
Grid.js is great for simple read-only tables. Most teams migrate when they need editing, virtualization for tens of thousands of rows, grouping, or tighter TypeScript types.
Does simple-table-core work with web components?
Yes. The vanilla engine has no peer dependencies and renders into any container element you provide.

Keep going