AG Grid Community

35.2.1 verified Sun Apr 19 auth: no javascript

AG Grid Community is a high-performance, fully-featured, and highly customizable JavaScript Data Grid library, delivering outstanding performance with no third-party dependencies. It provides the core grid functionality and integrates smoothly with all major JavaScript frameworks, including React, Angular, and Vue, often via dedicated framework-specific packages (e.g., `ag-grid-react`). The current stable version is 35.2.1, with frequent minor and patch releases, and major versions typically introduced every few months, ensuring continuous improvement and feature additions. It ships with comprehensive TypeScript types for robust development.

Common errors

error TypeError: Cannot read properties of undefined (reading 'api') ↓

cause Attempting to access `gridApi` or `columnApi` before the grid has been fully initialized or before the `onGridReady` event fires.

fix

Ensure you access the gridApi and columnApi only after the onGridReady callback has been invoked, or when they are guaranteed to be available (e.g., by checking for their existence or using the createGrid return value).

error Error: Could not find the grid container element. ↓

cause The HTML element specified as the grid container (e.g., by ID) does not exist in the DOM when the grid initialization code runs.

fix

Verify that your HTML file includes a div element with the correct id and that your JavaScript code is executed after the DOM is fully loaded (e.g., within DOMContentLoaded event listener or a script tag at the end of <body>).

error Grid does not render or appears unstyled (missing borders, incorrect fonts, etc.) ↓

cause The necessary structural or theme CSS styles for AG Grid are not correctly imported or applied. This is a common issue with the v33 theming API change.

fix

If using v33+, ensure you are importing and applying a theme object (e.g., import { themeQuartz } from 'ag-grid-community'; gridOptions.theme = themeQuartz;). If you are using legacy themes, confirm that you have gridOptions.theme = 'legacy' set and are importing both ag-grid-community/styles/ag-grid.css and a theme-specific CSS file like ag-grid-community/styles/ag-theme-alpine.css.

Warnings

breaking AG Grid v33 introduced a new Theming API, deprecating direct CSS file imports for themes. While legacy CSS imports (e.g., `import 'ag-grid-community/styles/ag-grid.css';`) are still supported by setting `gridOptions.theme = 'legacy'`, the recommended approach is to import theme objects (e.g., `themeQuartz`) and assign them to the `theme` grid option. ↓

fix Migrate from CSS imports to the new Theming API. Instead of `import 'ag-grid-community/styles/ag-theme-alpine.css';`, use `import { themeAlpine } from 'ag-grid-community';` and set `gridOptions.theme = themeAlpine;`. For customisation, use `themeAlpine.withParams(...)`.

breaking AG Grid v35.0.0 introduced several breaking changes, including the removal of grid options like `rowBuffer`, `groupMultiAutoColumn`, and `animateRows`. Additionally, the `columnDefs.pinned` property was renamed to `columnPinned`. ↓

fix Consult the AG Grid v35 migration guide for a full list of removed and renamed APIs. Update your grid configurations and column definitions accordingly. For example, change `pinned: 'left'` to `columnPinned: 'left'` in `ColDef`.

gotcha Many advanced features like Row Grouping with Aggregation, Server-Side Row Model, Excel Export, and Integrated Charts are only available in the AG Grid Enterprise version. Attempting to use these features with `ag-grid-community` will result in missing functionality or runtime errors. ↓

fix Verify that the feature you intend to use is part of the Community Edition. If it's an Enterprise feature, you will need to acquire an AG Grid Enterprise license and install the `@ag-grid-enterprise/all-modules` package (or specific feature modules).

gotcha When using AG Grid with a JavaScript framework like React, Angular, or Vue, you *must* install and use the corresponding framework-specific package (e.g., `ag-grid-react`, `ag-grid-angular`, `ag-grid-vue`) in addition to `ag-grid-community`. Directly using `ag-grid-community` for rendering framework components will not work as expected. ↓

fix Install the correct framework package for your project (e.g., `npm install ag-grid-react ag-grid-community`) and import components like `AgGridReact` from that package, configuring it with your `gridOptions`.

Install

npm install ag-grid-community

yarn add ag-grid-community

pnpm add ag-grid-community

Imports

Grid
wrong
```
const { Grid } = require('ag-grid-community');
```
correct
```
import { Grid } from 'ag-grid-community';
```
The primary class for instantiating the grid. ESM import is standard for modern applications.
createGrid
wrong
```
import { Grid } from 'ag-grid-community'; // then new Grid(...)
```
correct
```
import { createGrid } from 'ag-grid-community';
```
Since v31, `createGrid` is the recommended way to instantiate the grid programmatically, returning the Grid API and Column API. The `new Grid()` constructor is still available but `createGrid` handles initialization more robustly.
GridOptions
wrong
```
import { GridOptions } from 'ag-grid-community';
```
correct
```
import type { GridOptions } from 'ag-grid-community';
```
GridOptions is a TypeScript interface used for configuring the grid. It should be imported as a type, not a value, to avoid runtime overhead.
Themes (e.g., themeQuartz)
wrong
```
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';
```
correct
```
import { themeQuartz } from 'ag-grid-community';
```
Since v33, AG Grid recommends using the Theming API by importing theme objects (e.g., `themeQuartz`) and passing them to the `gridOptions.theme` property. Direct CSS file imports are deprecated but still supported via `gridOptions.theme = 'legacy'` for backward compatibility.

Quickstart

This quickstart initializes a basic AG Grid with defined columns and row data, enabling filtering, sorting, and pagination, using the modern Theming API.

import { createGrid, type GridOptions, type ColDef, themeQuartz } from 'ag-grid-community';

// Row Data
const rowData = [
  { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
  { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
  { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
  { make: 'Porsche', model: 'Taycan', price: 81900, electric: true }
];

// Column Definitions
const colDefs: ColDef[] = [
  { field: 'make', filter: true },
  { field: 'model', filter: true },
  { field: 'price', sortable: true, valueFormatter: p => '$' + p.value.toLocaleString() },
  { field: 'electric' }
];

// Grid Options
const gridOptions: GridOptions = {
  columnDefs: colDefs,
  rowData: rowData,
  pagination: true,
  theme: themeQuartz, // Use the new Theming API
  onGridReady: (params) => {
    console.log('Grid is ready:', params.api);
    // Example: Auto-size columns after data is loaded
    params.api.sizeColumnsToFit();
  }
};

// Get a reference to the container element
const eGridDiv = document.querySelector<HTMLElement>('#myGrid');

if (eGridDiv) {
  // Create the grid
  const { api, columnApi } = createGrid(eGridDiv, gridOptions);

  // Optionally, expose API for debugging or external interaction
  (window as any).gridApi = api;
  (window as any).columnApi = columnApi;
} else {
  console.error('Grid container element #myGrid not found.');
}

// Don't forget to add a div with id='myGrid' and some height/width in your HTML
// <div id="myGrid" style="height: 400px; width: 600px;"></div>