Official Table Partner · Data Grid

Community edition is free & MIT-licensed

The enterprise data grid,
alongside TanStack Table

AG Grid is the official open-source partner of TanStack Table. When a headless table needs to become a full data grid — pivoting, grouping, a server-side row model for millions of rows — AG Grid picks up where Table leaves off, across React, Angular, Vue, and vanilla JavaScript.

"Together we strive to educate the ecosystem about the differences between the two libraries and when to choose which." — the TanStack Table & AG Grid partnership

Get started free See how it works

Community is free forever. No credit card required.

MIT

Community license

Frameworks supported

1M+

Rows with server-side model

45-day

AG Grid Studio trial

What AG Grid brings to the table

Everything in Community is free and MIT-licensed. Enterprise adds the heavy-duty features teams reach for when a basic table UI is no longer enough.

Row grouping & aggregation

Group rows by any column and roll up totals, averages, and custom aggregations across millions of records.

Pivoting

Pivot rows into columns on the fly, just like a spreadsheet, without reshaping your data on the server.

Server-side row model

Stream, sort, filter, and group huge datasets straight from your backend — the grid only fetches what it renders.

Excel export

Export styled, multi-sheet Excel files directly from the grid, including grouping and formatting.

Integrated charts

Turn any selection into an interactive chart powered by AG Charts, without leaving the grid.

Master / detail

Expand any row into a nested detail grid for drill-down views without a separate page or modal.

Tree data

Render hierarchical data — file systems, org charts, nested categories — with lazy loading built in.

Theming engine

A modern theming API with design tokens, shared with AG Grid Studio so grids and dashboards match.

From install to grid in 4 steps

AG Grid is a client-side React component. Install Community, register the modules, and render a grid — then reach for Enterprise when you need it.

Install the Community packages

npm install ag-grid-react ag-grid-community

ModuleRegistry.registerModules([AllCommunityModule])

Render a grid with columns and row data

<AgGridReact rowData={rows} columnDefs={cols} />

Unlock Enterprise when you need it

npm install ag-grid-enterprise

terminal

# Community edition — free and MIT-licensed
npm install ag-grid-react ag-grid-community

CarGrid.tsx

import { useState } from 'react'
import { AgGridReact } from 'ag-grid-react'
import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'

ModuleRegistry.registerModules([AllCommunityModule])

export function CarGrid() {
  const [rowData] = useState([
    { make: 'Tesla', model: 'Model Y', price: 64950 },
    { make: 'Ford', model: 'F-Series', price: 33850 },
    { make: 'Toyota', model: 'Corolla', price: 29600 },
  ])
  const [columnDefs] = useState([
    { field: 'make' },
    { field: 'model' },
    { field: 'price' },
  ])

  // A container height is required — the grid virtualizes rows.
  return (
    <div style={{ height: 400 }}>
      <AgGridReact rowData={rowData} columnDefs={columnDefs} />
    </div>
  )
}

Read the React quickstart Explore the docs

TanStack Table vs AG Grid — when to choose which

The two libraries share a problem space but take opposite approaches. This is the honest guidance at the heart of the partnership.

Reach for TanStack Table when…

You want a headless grid you style and compose yourself
You need a tiny bundle and full control over the DOM
You are building a bespoke table UI with your own design system
You want the same core across React, Vue, Solid, Svelte, Qwik, and Angular

Reach for AG Grid when…

You need enterprise features like pivoting or a server-side row model out of the box
You are handling hundreds of thousands to millions of rows
You want Excel export, integrated charts, and range selection without building them
You need a batteries-included grid your team can ship this week

Fits into your TanStack stack

AG Grid slots alongside the TanStack libraries you already use — from Table to Query to Start.

TanStack Table

AG Grid is the official open-source partner of TanStack Table. Reach for Table when you want a headless grid, and AG Grid when you need a batteries-included one.

TanStack Query

Feed AG Grid's server-side row model from a Query-backed API. Query owns fetching and caching; the grid owns sorting, filtering, and grouping at scale.

TanStack Start

AG Grid renders on the client after hydration inside a TanStack Start app — drop it into any route with a container height and column definitions.

TanStack Virtual

AG Grid ships its own row and column virtualization. Use TanStack Virtual for custom virtualized surfaces outside of a grid.

AG Grid Studio

Embedded analytics. Built to perform.

AG Grid Studio adds drag-and-drop dashboards, charts, grids, and filters to your app without building analytics from scratch. It shares a theming engine with AG Grid, so everything matches out of the box.

Drag & drop dashboards

Rearrange and resize charts, grids, and KPI tiles in real time — no rebuild required.

Widget gallery

Pre-built bar, line, area, pie, and scatter charts, plus grids and KPI tiles ready to drop in.

AI assistant

Ask questions of your data in natural language and generate dashboards on the fly.

Edit and view modes

Configure in edit mode, then hand a clean, read-only reporting view to stakeholders.

Start a 45-day free trial Explore AG Grid Studio

Go deeper

Detailed guides for getting started, comparing grids, and unlocking Enterprise and Studio.

React quickstart

Add AG Grid to a TanStack app in minutes

vs TanStack Table

When to choose which grid

Enterprise features

Pivoting, grouping, and the server-side row model

AG Grid Studio

Embedded analytics dashboards

Frequently asked questions

Common questions from TanStack developers evaluating AG Grid.

AG Grid Community is free and MIT-licensed for commercial use, and covers sorting, filtering, editing, virtualization, and custom cell rendering. AG Grid Enterprise and AG Grid Studio require a commercial license and add features like pivoting, the server-side row model, integrated charts, and embedded dashboards.

TanStack Table is a headless library: it gives you the state and logic for a table and you bring the markup and styles. AG Grid is a full, batteries-included data grid with its own rendering and enterprise features. They are complementary — that is why AG Grid is the official open-source partner of TanStack Table.

AG Grid Studio is an embedded analytics toolkit for building drag-and-drop dashboards on top of AG Grid and AG Charts. It handles data processing over hundreds of thousands of rows, ships a widget gallery, and includes an AI assistant. It offers a 45-day free trial with full features and no watermarks.

Yes. AG Grid is a client-side React component, so it renders inside any TanStack Start route after hydration. Install ag-grid-react and ag-grid-community, register the Community modules, and give the grid a container with an explicit height.

Yes. A common pattern is to let TanStack Query own data fetching and caching while AG Grid's server-side row model requests only the rows it needs to display. Query handles the network; the grid handles sorting, filtering, and grouping at scale.

AG Grid virtualizes both rows and columns, so it renders only what is on screen. With the client-side row model it comfortably handles tens of thousands of rows, and with the Enterprise server-side row model it streams millions of rows straight from your backend.

Official TanStack Table open-source partner