Migrating from AG Grid

Wit Grid and AG Grid solve the same problem — a virtualized, editable data grid — and share a lot of vocabulary (rowData/rows, columnDefs/columns, rowModelType, masterDetail). Most of a migration is a mechanical rename. The differences that aren't mechanical are called out explicitly below.

Package and root componentCopy Anchor Link

import { AgGridReact } from 'ag-grid-react';

<AgGridReact rowData={rows} columnDefs={columnDefs} getRowId={(p) => p.data.id} onGridReady={(p) => (apiRef.current = p.api)} />;

Two shape differences that trip people up on the first pass:

• getRowId takes the row directly, not a wrapped params.data.
• onGridReady hands you { api, rowModelType } directly, not a params object you dig .api out of. There's no separate onFirstDataRendered — onGridReady fires once, after the grid's first paint.

Column definitionsCopy Anchor Link

See the full column shape in Columns.

Row grouping & aggregationCopy Anchor Link

AG Grid marks grouping and aggregation on the column (rowGroup: true, aggFunc: 'sum'). Wit Grid keeps both on the grid, in initialState — the column stays a plain column definition:

const columnDefs = [
	{ field: 'department', rowGroup: true, hide: true },
	{ field: 'salary', aggFunc: 'sum' },
];

Group rows are cell rows with an auto group column, as in AG Grid:

See Grouping & Tree Data for the details and the expansion API (the expand, collapse, expandAll and collapseAll commands, and the expansion state).

Row modelsCopy Anchor Link

Both grids use the same three-way split, and the names are close enough to be a find-and-replace:

The datasource contract is where they diverge — AG Grid uses a success/fail callback shape, Wit Grid uses a Promise:

const datasource = {
	getRows(params) {
		fetch(`/api/rows?start=${params.startRow}&end=${params.endRow}`)
			.then((res) => res.json())
			.then((data) => params.successCallback(data.rows, data.lastRow))
			.catch(() => params.failCallback());
	},
};

Throw (or reject) instead of calling a failCallback; the grid marks that block failed. An AbortSignal is provided for free — no manual request-cancellation bookkeeping. See Row Models for the full request/response shape, including the server row model's route-aware request.

Master-detailCopy Anchor Link

The mental model is the same — a nested grid under an expandable row — and the prop names are nearly identical:

See Master-Detail for the full renderer signature — Wit Grid's detail renderer receives { visualRow, api }, where the nested grid is a fully independent <Grid> instance you render yourself (not a configured sub-grid options object).

SelectionCopy Anchor Link

<Grid rows={rows} columns={columns} getRowId={(row) => row.id} rowSelection='multiple' />

rowSelection takes the same 'single' | 'multiple' shorthand as AG Grid's mode string, or an options object ({ mode, selectAllScope }) for finer control over what "select all" means. See Selection.

ThemingCopy Anchor Link

AG Grid ships CSS-class themes (ag-theme-alpine) or, in newer versions, its JS Theming API (theme={themeQuartz}). Wit Grid's theming is entirely JS/CSS-variable driven through GridApi — no separate theme object to import and apply:

<Grid rows={rows} columns={columns} initialState={{ themeName: 'dark' }} />

api.setState({ themeName: 'light' });
api.setOptions({ theme: { focusRing: '#10b981' } });

Seven built-in themes ship out of the box, with runtime switching and system color-scheme detection. See Theming.

Clipboard, export, and undo/redoCopy Anchor Link

await api.copySelectedRange(); // clipboard copy
await api.pasteFromClipboard(); // clipboard paste
await api.exportExcel(); // Excel export (keeps number, currency, percent and date formats)
api.exportCsv(); // CSV export
api.undo(); // history
api.redo();

What doesn't map 1:1Copy Anchor Link

• No auto-generated group column. You render group rows yourself via groupRowRenderer — more setup for a default look, full control over the result.
• One rule per action. Editability is one of the column's rules (canEdit, canSort, canGroup, canCopy, canPaste, canExport, …), each true, false, a reason, or a function — see Columns.
• Not on strict semver yet. See Migration Notes before you pin a version in a production migration.

Suggested migration orderCopy Anchor Link