AG Grid React Component

35.2.1 · active · verified Sun Apr 19

ag-grid-react is the official React component for AG Grid, a highly performant, fully-featured, and customizable data grid library. It allows developers to integrate advanced table functionalities, such as filtering, sorting, pagination, grouping, aggregation, and extensive customization options, directly into their React applications. The package is currently at version 35.2.1 and maintains a rapid release cadence, frequently delivering new features, performance improvements, and bug fixes across minor versions, with major versions introducing significant architectural changes or API updates. A key differentiator is its focus on enterprise-grade features and performance without relying on external third-party dependencies beyond React itself, making it a robust choice for complex data visualization and manipulation tasks in React environments.

Common errors

```
TypeError: Cannot read properties of undefined (reading 'setFilterModel')
```
cause Attempting to call `api` methods on a `gridRef.current` that is `null` or `undefined`, often before the grid is fully initialized or when the component is unmounted.

fix Always guard access to `gridRef.current.api` (e.g., `gridRef.current?.api.setFilterModel(...)`) or ensure the operation is performed after the `onGridReady` callback fires, which guarantees the `api` is available.
```
Module not found: Error: Can't resolve 'ag-grid-community/styles/ag-grid.css'
```
cause Incorrect path or missing installation of `ag-grid-community` or its styles.

fix Verify that `ag-grid-community` is installed (`npm install ag-grid-community`) and that the import paths for the CSS files are correct as per the official documentation (`import 'ag-grid-community/styles/ag-grid.css';`).
```
Error: AG Grid: invalid colId 'undefined' supplied to column API.
```
cause This often occurs when `columnDefs` are not properly defined or updated, leading to columns without unique `colId` values, especially when using complex column definitions or dynamic updates.

fix Ensure all column definitions have unique `field` properties if `colId` is not explicitly set, or assign unique `colId` values manually for more control. Review `columnDefs` updates to ensure consistency.

Warnings

breaking In AG Grid v35.0.0, the `defaultExportParams` and `excelExportParams` properties are no longer supported. These have been replaced by new granular options within the `gridOptions` configuration.
Fix: Review the AG Grid v35 migration guide. Update export configurations to use the new `exportDataAsCsv` and `exportDataAsExcel` methods on the `GridApi`, which now accept a single object parameter for configuration instead of individual arguments. Refer to the official documentation for specific property replacements.
breaking AG Grid v35.0.0 introduced significant updates to the `chartToolbar` property and integrated charting modules, moving towards a more modular and extensible charting API. Direct usage of previous charting configurations may break.
Fix: Consult the AG Grid v35 migration guide, specifically the section on 'Integrated Charts'. Adjust charting configurations and module imports to align with the new modular API.
breaking The `cellDataType` property has been removed from the `columnTypes` type as its value was always ignored. Similarly, `colId` has been removed from `autoGroupColumnDef` type.
Fix: Remove `cellDataType` from `columnTypes` definitions. For `autoGroupColumnDef`, use `autoGroupColumnDef.context` to store any auto-group column specific data instead of `colId`.
gotcha AG Grid requires both core CSS and a theme CSS to render correctly. Forgetting to import these styles will result in an unstyled or visually broken grid.
Fix: Always include `import 'ag-grid-community/styles/ag-grid.css';` for core styles and `import 'ag-grid-community/styles/ag-theme-your-theme.css';` (e.g., `ag-theme-alpine.css`) for a visual theme in your application's entry point or relevant component.
gotcha Using the free AG Grid Community Edition but attempting to use Enterprise-only features (e.g., Row Grouping, Advanced Filters, Master/Detail) will result in console warnings or disabled functionality.
Fix: Ensure you are using `ag-grid-enterprise` if you require enterprise features. This typically involves importing the enterprise module (`import 'ag-grid-enterprise';`) and having a valid license key set via `LicenseManager.setLicenseKey('YOUR_LICENSE_KEY');` before the grid initializes. Otherwise, stick to community-edition features.

Install

npm install ag-grid-react npm
yarn add ag-grid-react yarn
pnpm add ag-grid-react pnpm

Imports

AgGridReact
wrong:
```
const AgGridReact = require('ag-grid-react');
```
correct:
```
import { AgGridReact } from 'ag-grid-react';
```
AgGridReact is the primary component. CommonJS require is generally discouraged in modern React/TypeScript projects.
GridReadyEvent, GridApi, ColDef
wrong:
```
import { GridReadyEvent, GridApi, ColDef } from 'ag-grid-community';
```
correct:
```
import type { GridReadyEvent, GridApi, ColDef } from 'ag-grid-community';
```
These are TypeScript types. Import them from 'ag-grid-community' using `import type` to avoid bundling unnecessary runtime code, especially in environments that don't tree-shake types effectively.
AG Grid Styles
wrong:
```
import 'ag-grid-react/dist/styles/ag-grid.css';
```
correct:
```
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
```
Styles are imported directly from `ag-grid-community`. Ensure you include both the core grid CSS and a theme CSS. Paths like `ag-grid-react/dist/styles` are legacy or incorrect for direct styling.

Quickstart

Demonstrates a basic AG Grid React component with static data, custom column definitions including formatting, and basic grid features like filtering, sorting, and pagination. It also shows how to programmatically clear filters using the Grid API via a ref, and includes essential CSS imports.

import React, { useState, useRef, useMemo, useCallback } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import type { ColDef, GridReadyEvent } from 'ag-grid-community';

interface RowData {
  make: string;
  model: string;
  price: number;
}

const AgGridExample: React.FC = () => {
  const gridRef = useRef<AgGridReact<RowData>>(null);
  const [rowData, setRowData] = useState<RowData[]>([
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 },
    { make: 'BMW', model: 'M5', price: 60000 },
    { make: 'Audi', model: 'A4', price: 45000 },
  ]);

  const [columnDefs] = useState<ColDef[]>([
    { field: 'make', filter: true, sortable: true },
    { field: 'model', filter: true, sortable: true },
    { field: 'price', filter: true, sortable: true, valueFormatter: p => '€' + (p.value as number).toLocaleString() },
  ]);

  const defaultColDef = useMemo<ColDef>(() => ({
    flex: 1,
    minWidth: 100,
    resizable: true,
  }), []);

  const onGridReady = useCallback((params: GridReadyEvent) => {
    // Can use params.api to interact with the grid, e.g., fetch data dynamically
    // params.api.sizeColumnsToFit();
  }, []);

  const clearFilters = useCallback(() => {
    gridRef.current?.api.setFilterModel(null);
  }, []);

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <button onClick={clearFilters} style={{marginBottom: '10px'}}>Clear All Filters</button>
      <AgGridReact
        ref={gridRef}
        rowData={rowData}
        columnDefs={columnDefs}
        defaultColDef={defaultColDef}
        onGridReady={onGridReady}
        pagination={true}
        paginationPageSize={10}
        animateRows={true}
      />
    </div>
  );
};

export default AgGridExample;

view raw JSON →