2026-04-18 · Solid · Pillar guide

SolidJS Data Grid: Simple Table Setup and Patterns

Best for Solid 1+100% Free, MITSignals & TypeScriptSolid Start Ready

Integrate @simple-table/solid for a reactive SolidJS table: install line, styles, fine-grained reactivity with the official adapter, plus hub and quick-start links.

The Solid.js data grid landscape in 2026

Solid is fast. Its fine-grained reactivity model and compile-time JSX deliver some of the best browser performance available—but the data grid ecosystem hasn't fully caught up. TanStack Solid Table is a port of the popular React headless library, Kobalte ships a low-level table primitive, and most Solid teams either render plain <table> tags or build their own grid on top of Solid signals.

Simple Table for Solid plugs that gap. A single component drops into Solid 1+ projects (including Solid Start) with full sorting, filtering, virtualization, column pinning, row grouping, nested headers, cell editing, and theming—free under MIT for individuals and zero-revenue companies. It's powered by simple-table-core, the same vanilla TypeScript engine the React, Vue, Angular, Svelte, and vanilla adapters share, but with first-class signal-driven props on the Solid side.

This pillar guide explains when Simple Table is the right Solid data grid, how it compares with TanStack Solid Table and Kobalte's table primitives, and exactly how to install and use it in a Solid Start app.

What You'll Learn
  • How Simple Table's Solid adapter compares with TanStack Solid Table and Kobalte
  • Bundle size, performance, and licensing trade-offs for Solid data grids
  • Step-by-step install for a Solid Start project
  • Where to migrate from when leaving TanStack Solid Table or a hand-rolled <table>

Why Solid teams pick Simple Table

Simple Table is built for Solid apps that need a real grid—virtualized, editable, themed—without writing it on top of a headless table library or porting React patterns.

Signals-friendly

Pass a signal getter or a plain array; Solid's fine-grained reactivity flows through to the grid without re-rendering the whole tree. Updates feel instant because they are.

Solid Start ready

Drop the component into any Solid Start route. Works with Vite-based dev and prod builds—no special configuration required.

Batteries included

Unlike TanStack Solid Table, you don't write your own header row, body, virtualization, or pagination UI. Drop the component in and customize what you need.

MIT for free, simple licensing for revenue

Free for individuals and zero-revenue projects under MIT. Per-product Pro/Enterprise licensing for revenue-generating teams—no per-developer fees.

How Simple Table stacks up against Solid incumbents

Below is how Simple Table for Solid compares with the table libraries Solid teams most commonly evaluate. Feature support reflects what's available out-of-the-box.

FeatureSimple TableTanStack Solid TableKobalte (table primitive)Plain <table>
Built-in UI (no styling required)
Row + column virtualization@tanstack/solid-virtual
Inline cell editing
Column pinningPartial
Row grouping + aggregationPartial
Signals-aware props
TypeScript-first types
LicenseMIT / ProMITMIT
The Bottom Line

Simple Table is the only batteries-included Solid data grid: virtualization, pinning, grouping, and inline editing without the headless wiring you'd do on top of TanStack Solid Table. Kobalte is excellent for accessible primitives but doesn't try to be a full grid.

Performance built for Solid apps

Internal benchmarks rendering 100,000 rows and 30 columns in a Solid 1.8 / Vite app on a mid-range laptop:

~140ms
Simple Table for Solid
Initial render
~600ms
TanStack Solid Table + virtual
After plumbing virtualization
~3.0s
Plain <table> with all rows
Browser layout struggles
Performance highlights
  • Row + column virtualization out-of-the-box—no @tanstack/solid-virtual integration code
  • 60fps scrolling with 1M+ rows, including grouped and pinned configurations
  • Fine-grained reactivity preserved: cell updates don't re-render unrelated rows
  • Tree-shakable: bundle only includes the SimpleTable surface you import

Get up and running in a Solid Start app

Install the package, import the stylesheet from any component or your root entry, and use <SimpleTable /> in any route or component.

Install:

npm install @simple-table/solid

Follow the Quick Start guide or open the StackBlitz sandbox below for a full, runnable Solid example.

When Simple Table is the right Solid grid

Pick Simple Table for Solid if any of these apply:

  • You need a working grid quickly—virtualized, editable, themed
  • You don't want to plumb @tanstack/solid-virtual on top of TanStack Solid Table
  • You need pinning, grouping, aggregations, or inline editing
  • You want signals-aware reactivity throughout the grid lifecycle
  • You need a consistent grid across Solid and other frameworks (React/Vue/Angular/Svelte)

Stay on what you have if:

  • You're using TanStack Solid Table specifically because you want full UI control.
  • You're rendering <100 rows with no advanced features—plain HTML is fine.

Frequently asked questions

Does Simple Table for Solid work with Solid Start?

Yes. The package is Vite/ESM friendly and ships its own stylesheet. Drop the component in any Solid Start route or layout—no special build configuration required.

Is the Solid adapter built on TanStack Solid Table?

No. @simple-table/solid wraps simple-table-core, the same vanilla TypeScript engine used by the React, Vue, Angular, Svelte, and vanilla adapters.

Does it preserve Solid's fine-grained reactivity?

Yes. Pass signal getters or plain arrays for headers/rows. Cell updates flow through Solid's reactivity model without re-rendering unrelated rows.

How does it compare with TanStack Solid Table?

TanStack Solid Table is a headless library; you build your own UI on top. Simple Table ships the UI, virtualization, pinning, grouping, and editing as a single component. Pick TanStack if you want full UI control; pick Simple Table if you want a working grid in minutes.

How does it compare with Kobalte?

Kobalte is excellent for accessible primitives—the same way Radix is for React. It doesn't aim to be a full data grid. Simple Table covers the data-grid surface (virtualization, editing, grouping) that Kobalte intentionally leaves out.

The verdict for Solid teams

If you're building a Solid or Solid Start app that displays more than a few hundred rows, needs editing, virtualization, pinning, or grouping, and you don't want to write all the table UI yourself on top of a headless library—Simple Table is the strongest free choice in the Solid ecosystem in 2026.

Simple Table for Solid ships as a single component, integrates cleanly with Solid signals and Solid Start, supports TypeScript strict mode, and shares its core with five other framework adapters—so a Solid + React or Solid + Vue org keeps a single grid mental model across stacks.

Continue building with Solid

Simple Table pairs a shared core (simple-table-core) with official adapters for React, Vue, Angular, Svelte, Solid, and vanilla TypeScript.

Ready to ship the Solid data grid users love?

Install @simple-table/solid, drop <SimpleTable /> into any route, and ship sorting, filtering, virtualization, pinning, grouping, and editing in your next Solid release.