Try it live
A real, running grid below — click a header to sort. Cell renderers (number, date, badge, link) are wired automatically by type.
Charts, built in
From cell sparklines to 17 enterprise types (Apache ECharts). Use the toolbar in the chart below to switch bar/line/radar/heatmap live — the same engine on React and Vue 3.
From one grid to enterprise
From the MIT community core to Pro features — install only the packages you need.
Fast onboarding
Declare columns with createColumns({ id, name, type }) — no TanStack knowledge. Column keys are type-safe (typos fail at compile time).
Virtualization + pinning
Smooth scrolling over tens of thousands of rows. Row/column virtualization, left/right pinning, sticky headers.
Pivot · aggregation
Multi-axis pivot tables, subtotals, transpose, per-group sum/avg/count, drag-and-drop group panel.
Server-side (SSRM)
Block lazy-loading, infinite scroll, viewport row model, server-side tree. Connect large backends.
17 chart types (React/Vue)
From cell sparklines to 17 enterprise chart types. BYO engine, SSR, one shared core across frameworks.
Spreadsheet
A1 formulas, dependency-graph recalculation, VLOOKUP / date / financial functions, cell formatting / styles / merging.
Excel/CSV/PDF export
One button for Excel/CSV/PDF download, clipboard, print. All/filtered/selected scope, number formats, multi-sheet, formula round-trip. (Free, MIT)
Editing · change tracking
Inline editing, add/update/delete dirty tracking, validation rules, Excel-style range selection and clipboard.
Multi-framework
React 18/19 + Vue 3 adapters on the same headless core (@tanstack/table-core).
Type-safe, without TanStack knowledge
createColumns auto-wires cell renderers by type and enforces the column id as keyof TData. Cell and filter callbacks receive a clean GridCellContext, so you never import TanStack types.
- A typo in a column key = a compile error
- Start with the @topgrid/grid facade; tree-shake via individual packages
- Need full control? Raw TanStack ColumnDef still works
import { Grid, createColumns } from '@topgrid/grid';
interface User { id: number; name: string; email: string; age: number; }
// 'type' auto-wires the cell renderer; 'id' is forced to keyof User (typos rejected)
const columns = createColumns<User>([
{ id: 'name', name: 'Name', type: 'text' },
{ id: 'email', name: 'Email', type: 'text' },
{ id: 'age', name: 'Age', type: 'number', align: 'right' },
]);
export default function App() {
return (
<Grid<User>
data={users}
columns={columns}
getRowId={(u) => String(u.id)}
enableSort
// clean callback — no need to import TanStack types
onCellClick={(ctx) => console.log(ctx.columnId, ctx.value)}
/>
);
}
Get started today
Five minutes from install to your first grid. Reach out anytime to evaluate adoption.