v0.10.2 · MIT licensedReact · Vanilla · Headless · Themeable

The only table packageyou'll ever need.Open-source React data table with AG Grid-class features — clipboard, pivot, row grouping, formulas, and animated column drag — MIT-licensed with a zero-dependency headless core.

Headless core, batteries-included React. AG Grid-class features — clipboard, pivot, row grouping, Excel-style fills, and premium animated column drag-to-reorder — MIT-licensed, no paywall, zero-dependency core.

npm i @zvndev/yable-react @zvndev/yable-themes
Explore the galleryRead the docsNewTry column dragGitHub
596passing tests
35.5kBReact pkg gzipped
0core runtime deps
import { useTable, Table } from '@zvndev/yable-react'
import '@zvndev/yable-themes/midnight.css'

const columns = [
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'email', header: 'Email' },
  { accessorKey: 'role', header: 'Role' },
]

function App() {
  const table = useTable({ data, columns })
  return <Table table={table} striped stickyHeader />
}
Yable vs AG Grid

The Enterprise features, MIT-free.

Clipboard, Excel-style fills, tree data, and row grouping sit behind AG Grid Enterprise at $999 / dev / year — Yable ships them MIT, alongside premium animated column drag-to-reorder. Row grouping and pivots render through <Table>with collapsible headers, dynamic columns, and rolled-up aggregates.

Yable$0MIT · 35.5kB gzip · 0 deps
AG Grid Enterprise$999per developer / year
CapabilityYableMIT · freeAG GridMIT core · $999/dev Enterprise
Clipboard copy / paste / TSV●MIT$Enterprise
Excel-style fill handle●MIT$Enterprise
Tree data / hierarchical rows●MIT$Enterprise
Row grouping render●MIT$Enterprise
Pivot tables◐programmatic$Enterprise
Animated column drag-to-reorder●premium◐basic, no animation
Column pinning●●Community
Column resizing●●Community
Headless core●—
Zero-dependency core●—
● shipping◐ partial / programmatic$ paid tier only— not available
Full matrix

The rest of the field.

Every Yable checkmark is verifiable in this repo. Competitor columns focus on built-in behavior rather than custom code or extra packages.

FeatureYableMIT · freeTanStack TableMIT · freeAG Grid CommunityMIT · freeAG Grid Enterprisepaid tier
Headless core●●——
React components shipped●—●●
Cell editing (text, select, checkbox…)●◐●●
Sorting / filtering / pagination●●●●
Pivot tablesYable: programmatic row model — render is DIY◐——$
Formula engine●——$
Clipboard copy / paste / TSV●——$
Fill handle (linear + geometric)●——$
Undo / redo with event hooks●—●●
Tree data / hierarchical rows●——$
Async cell commits + retry●———
8 themed token packs●—◐◐
Row virtualization●◐●●
Keyboard navigation grid●—●●
Column drag-to-reorderanimated drop indicator in Yable●◐◐◐
License●●●$
● shipping◐ partial / DIY$ paid tier only— not available
Built In

Stuff you'd normally bolt together yourself.

FormulaEngine

Real formula engine.

Tokenizer → AST → recursive evaluator with dependency graph and circular-ref detection. 17 functions: SUM, IF, ROUND, etc.

=SUM(B2:B12) * IF(D2 > 100, 1.1, 1)
getPivotRowModel

Pivot row model.

getPivotRowModel() returns real aggregated rows — row groups, column groups, subtotals, grand totals — from one config. React <Table> can render the generated pivot rows and dynamic columns directly.

const pivot = table.getPivotRowModel({
  rows: ["region"],
  values: [{ field: "revenue", aggregation: "sum" }],
})
onCommit

Async cell commits.

onCommit batches edits and sends them to your API. Pending/saved/error states render per-cell. Auto-retry on failure.

onCommit: async (patches) => {
  await api.save(patches)
}
Live Data Surface

Employee ledger with real interaction density.

Search, sort, select, and paginate without leaving the same component tree.

20 rows3 departmentsSelection ready

Click a header to sort. Shift-click to multi-sort.

First Name
Last Name
Email
Age
Department
Role
Salary
Start Date
Status
Performance

Virtualization benchmarks.

Pretext measures every variable-height row before paint. Pick a size — numbers are live.

prepare()—ms
layout()—ms
per cell—ms
total height—px
Title
Excerpt
Author
Category
Get Started

11-step quickstart.

Each step has copy-paste code tested in a live Next.js app.

Quickstart FeaturesAsync Commits

Ships as 4 packages: core, react, vanilla, themes.