TanStack Table v9: A Cross‑Framework Table Engine Supporting 9 Frontend Frameworks

Cross‑framework Table Engine

TanStack Table v9 separates the table logic into a framework‑agnostic core ( TanStack Table Core ) and thin adapters that connect the core to a framework’s reactive system, lifecycle hooks, and UI rendering. The core is written >95% in vanilla JavaScript, enabling rapid expansion to many front‑end ecosystems.

Core responsibilities

Sorting

Filtering

Pagination

Grouping

State management

Data calculations

Framework‑layer responsibilities

Reactive connections

Lifecycle handling

UI rendering

Table Engine
               ↓
        Framework Adapter
               ↓
   React / Vue / Svelte / Angular / …

Feature architecture redesign

In v9 the monolithic configuration of v8 is replaced by independent Feature modules that can be composed as needed. This improves tree‑shaking, extensibility and bundle size.

Table Core
  +
Sorting Feature
Filtering Feature
Pagination Feature
Pinning Feature
Custom Feature

Better tree‑shaking

Flexible extension (e.g., Excel export, permission control, custom views, drag‑and‑drop layouts)

Custom features can be authored and combined with the core

Performance improvements for large grids

Peak memory usage drops by roughly 90 % .

Typical operations see speedups of 40 %–70 % .

Optimisations include a rewritten Row Model, improved caching strategies, reduced object allocation, and state‑update refinements. These gains are most noticeable in enterprise back‑ends, BI platforms and data‑analysis systems that render massive tables.

New state system

Previously table state was accessed via table.getState() and relied on the host framework’s state mechanisms. v9 introduces a dedicated TanStack Store that feeds a Reactive State layer before reaching the core, resulting in finer‑grained updates, fewer unnecessary renders and better compatibility with upcoming React compiler optimisations.

TanStack Store
      ↓
Reactive State
      ↓
TanStack Table v9

Stronger TypeScript support

Feature registration now yields fully typed APIs, making custom extensions safer and easier to develop.

tableFeatures({
  sortingFeature,
  filteringFeature
})

Adapters and installation

After the stable release, install the adapter for the target framework:

React: npm install @tanstack/react-table Vue: npm install @tanstack/vue-table Angular: npm install @tanstack/angular-table Svelte: npm install @tanstack/svelte-table Solid: npm install @tanstack/solid-table Lit: npm install @tanstack/lit-table Preact: npm install @tanstack/preact-table Ember: npm install @tanstack/ember-table Alpine: npm install @tanstack/alpine-table The usage flow is:

Business Component
   ↓
Framework Adapter
   ↓
TanStack Table Core

UI rendering is left entirely to the developer, allowing integration with Tailwind CSS, shadcn/ui, Ant Design or any custom design system.

Future outlook – one core, many ecosystems

TanStack’s roadmap extends the same core‑engine principle to other projects (Query, Router, Form, Virtual, Store). The core provides a single implementation of fundamental capabilities (sorting, filtering, pagination, virtual scrolling, etc.) while each framework supplies an adapter that connects the core to its rendering model. This reduces duplicated effort across the rapidly diversifying front‑end landscape and paves the way for resilient, reusable front‑end building blocks.