AG Grid is a client-side React component, so it drops into any TanStack Start or Router route. Install the free Community packages, render a grid, and feed it with TanStack Query.
Community is free forever and MIT-licensed. No credit card required.
Start from a TanStack Start or Router app — AG Grid renders on the client after hydration, so any route works.
Add the free Community packages: ag-grid-react and ag-grid-community.
Register the Community modules once, then render AgGridReact with columnDefs, rowData, and a container height.
Feed rowData from a Query result. Query owns fetching and caching; the grid owns sorting, filtering, and display.
Two packages, one module registration, and a grid with columns and rows.
# Free, MIT-licensed Community edition
npm install ag-grid-react ag-grid-communityimport { useState } from 'react'
import { AgGridReact } from 'ag-grid-react'
import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'
// Register the Community modules once, at startup.
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 its rows.
return (
<div style={{ height: 400 }}>
<AgGridReact rowData={rowData} columnDefs={columnDefs} />
</div>
)
}Let Query handle fetching and caching, then pass the result straight into the grid as rowData.
import { useQuery } from '@tanstack/react-query'
import { AgGridReact } from 'ag-grid-react'
export function CarsRoute() {
const { data = [], isLoading } = useQuery({
queryKey: ['cars'],
queryFn: () => fetch('/api/cars').then((r) => r.json()),
})
return (
<div style={{ height: 500 }}>
<AgGridReact
rowData={data}
loading={isLoading}
columnDefs={[{ field: 'make' }, { field: 'model' }, { field: 'price' }]}
defaultColDef={{ sortable: true, filter: true, resizable: true }}
/>
</div>
)
}Yes. AG Grid virtualizes rows, so it needs a bounded height to know how many to render. Give the wrapping element an explicit height (for example height: 500px) or a flex layout that constrains it. DomLayout autoHeight is available for small, non-virtualized grids.
AG Grid is a client-side component and mounts after hydration. Your TanStack Start route can server-render the surrounding page and data; the grid itself initializes in the browser. Load row data with a loader or TanStack Query and pass it in as rowData.
Set a defaultColDef with sortable, filter, and resizable to enable them across all columns, or configure them per column. These are part of the free Community edition.
Install ag-grid-enterprise, register the Enterprise modules, and call LicenseManager.setLicenseKey() once. Features like pivoting and the server-side row model then become column and grid options. See the Enterprise page for details.