AG Grid AngularSimple Table for Angular

Migrate from AG Grid Angular to Simple Table for Angular

A practical migration playbook from AG Grid Angular to Simple Table for Angular. Drop the Enterprise license fees and the heavy theme runtime—keep virtualization, pinning, grouping, and editing.

AG Grid Angular is a powerful data grid, but its bundle is large and many of the features Angular teams reach for live behind the Enterprise tier. Simple Table for Angular is an MIT-licensed alternative that ships virtualization for 1M+ rows, column pinning, row grouping with aggregations, and inline editing in the standard package.

This guide assumes you have an existing Angular 17/18/19 standalone-components app using AG Grid Angular and you want to swap it for @simple-table/angular without rewriting your data layer.

Why migrate

  • All grouping, pinning, and editing features are MIT—no Enterprise license to renew.
  • Smaller install: ~70 kB gzipped vs AG Grid's full theme + community runtime.
  • Idiomatic Angular signals API; no zone tricks needed.
  • Same engine across React/Vue/Svelte/Solid/Vanilla if your stack expands.

Prerequisites

  • Angular 17 or newer (standalone components recommended).
  • Simple Table for Angular installed: npm install @simple-table/angular.
  • TypeScript ≥ 5.2 (matches Angular 17+ baseline).
  • Backup of any custom AG Grid cell renderers — you'll port them to Simple Table renderers.

Install

npm install @simple-table/angular

API mapping cheat sheet

AG Grid AngularSimple Table for AngularNotes
[rowData][rows]See the Simple Table docs for the row shape.
[columnDefs][defaultHeaders]field → accessor; headerName → label; width unchanged.
ColDef.cellRendererHeaderObject.cellRendererPass an Angular component or a function returning a TemplateRef.
rowSelection: 'multiple'selectableCells / selectableColumnsConfigure on the table, not on each column.
pinned: 'left' | 'right'HeaderObject.pinnedSame values; pinning is built-in.
rowGroup + aggFunc (Enterprise)rowGrouping + aggregationFree in Simple Table—no Enterprise license required.
valueFormatterCustom cell rendererFormat inside the renderer or pre-format your data.
domLayout: 'autoHeight'height='auto'Or pass a fixed height like '480px'.
AG Grid theme CSS@simple-table/angular/styles.cssTheme via CSS variables on a wrapper element.

Step-by-step migration

  1. Install Simple Table and remove AG Grid

    Add @simple-table/angular and import the stylesheet at the app root. Remove ag-grid-community and ag-grid-angular once the migration is complete.

    npm install @simple-table/angular
npm uninstall ag-grid-angular ag-grid-community ag-grid-enterprise

// styles.scss or main.ts
import "@simple-table/angular/styles.css";

  2. Convert column definitions

    Map each ColDef to a Simple Table HeaderObject. The shape is similar; field becomes accessor, headerName becomes label.

  3. Reshape your row data

    Each row needs a stable id. Adapt your existing records to the row shape documented in the Simple Table docs.

  4. Port cell renderers

    AG Grid component renderers map to Simple Table cell renderers. Replace AG Grid lifecycle hooks (agInit, refresh) with regular Angular component inputs.

  5. Re-enable advanced features

    Pinning, grouping with aggregations, inline editing, and infinite scroll are all built-in in Simple Table—no extra modules to register.

Gotchas

Stable row ids are required
Simple Table needs a stable id per row. Use a database id or a generated uuid.
No CSR-specific zone tricks
Simple Table for Angular plays well with the new signals API. If you used onGridReady or detectChanges hacks, you can usually delete them.
AG Grid Enterprise features
Pivoting, master/detail, and integrated charts are AG-specific. Open an issue if you have one of these workflows—Simple Table covers grouping/aggregations and most reporting needs in MIT.

FAQ

Does this work with Angular Material themes?
Yes. Simple Table doesn't ship its own design system—theme it via CSS variables to match Material, Tailwind, or your own design tokens.
How big is the bundle compared to AG Grid?
Roughly an order of magnitude smaller in typical apps: ~70 kB gzipped for Simple Table for Angular vs 200–400 kB+ for AG Grid Community + theme.
Can I migrate incrementally, route-by-route?
Yes. The two libraries can coexist—migrate one feature area at a time and remove ag-grid-* once the last consumer is gone.

Keep going