React Integration

AG Grid provides first-class React support through the ag-grid-react package, with full TypeScript support, hooks, and optimized rendering.

Installation

Install the packages

Install AG Grid React along with the core library:

npm install ag-grid-react ag-grid-community

For enterprise features:

npm install ag-grid-react ag-grid-community ag-grid-enterprise

Import the component

import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

Basic Usage

Functional Component
Class Component

import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import { ColDef } from 'ag-grid-community';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

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

export default function App() {
  const [rowData] = useState<IRow[]>([
    { make: 'Tesla', model: 'Model Y', price: 64950 },
    { make: 'Ford', model: 'F-Series', price: 33850 },
    { make: 'Toyota', model: 'Corolla', price: 29600 },
  ]);

  const [colDefs] = useState<ColDef<IRow>[]>([
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
  ]);

  return (
    <div className="ag-theme-quartz" style={{ height: 500 }}>
      <AgGridReact<IRow>
        rowData={rowData}
        columnDefs={colDefs}
      />
    </div>
  );
}

import React, { Component } from 'react';
import { AgGridReact } from 'ag-grid-react';
import { ColDef } from 'ag-grid-community';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

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

export default class App extends Component {
  rowData: IRow[] = [
    { make: 'Tesla', model: 'Model Y', price: 64950 },
    { make: 'Ford', model: 'F-Series', price: 33850 },
    { make: 'Toyota', model: 'Corolla', price: 29600 },
  ];

  colDefs: ColDef<IRow>[] = [
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
  ];

  render() {
    return (
      <div className="ag-theme-quartz" style={{ height: 500 }}>
        <AgGridReact<IRow>
          rowData={this.rowData}
          columnDefs={this.colDefs}
        />
      </div>
    );
  }
}

TypeScript Support

The AgGridReact component is fully typed with generics for type-safe row data.

Component Props Interface

import { GridOptions, Module } from 'ag-grid-community';

interface AgGridReactProps<TData = any> extends GridOptions<TData> {
  /** Initial grid configuration */
  gridOptions?: GridOptions<TData>;
  
  /** Register AG Grid modules for this instance */
  modules?: Module[];
  
  /** CSS style for the grid container */
  containerStyle?: React.CSSProperties;
  
  /** CSS class for the grid container */
  className?: string;
}

Type-Safe Column Definitions

import { ColDef } from 'ag-grid-community';

interface UserData {
  id: number;
  name: string;
  email: string;
  age: number;
}

const columnDefs: ColDef<UserData>[] = [
  { 
    field: 'name',
    headerName: 'Full Name',
    valueGetter: (params) => {
      // params.data is typed as UserData
      return params.data?.name.toUpperCase();
    }
  },
  { field: 'email' },
  { field: 'age', filter: 'agNumberColumnFilter' }
];

Accessing the Grid API

The Grid API provides methods to interact with the grid programmatically.

Functional Component
Class Component
onGridReady Callback

import { useRef } from 'react';
import { AgGridReact } from 'ag-grid-react';
import { GridApi } from 'ag-grid-community';

export default function App() {
  const gridRef = useRef<AgGridReact>(null);

  const onExportClick = () => {
    gridRef.current?.api.exportDataAsCsv();
  };

  const onSelectAll = () => {
    gridRef.current?.api.selectAll();
  };

  return (
    <>
      <button onClick={onExportClick}>Export CSV</button>
      <button onClick={onSelectAll}>Select All</button>
      <div className="ag-theme-quartz" style={{ height: 500 }}>
        <AgGridReact
          ref={gridRef}
          rowData={rowData}
          columnDefs={columnDefs}
        />
      </div>
    </>
  );
}

import { Component, createRef } from 'react';
import { AgGridReact } from 'ag-grid-react';

export default class App extends Component {
  private gridRef = createRef<AgGridReact>();

  onExportClick = () => {
    this.gridRef.current?.api.exportDataAsCsv();
  };

  onSelectAll = () => {
    this.gridRef.current?.api.selectAll();
  };

  render() {
    return (
      <>
        <button onClick={this.onExportClick}>Export CSV</button>
        <button onClick={this.onSelectAll}>Select All</button>
        <div className="ag-theme-quartz" style={{ height: 500 }}>
          <AgGridReact
            ref={this.gridRef}
            rowData={this.rowData}
            columnDefs={this.colDefs}
          />
        </div>
      </>
    );
  }
}

import { useState } from 'react';
import { GridApi, GridReadyEvent } from 'ag-grid-community';

export default function App() {
  const [gridApi, setGridApi] = useState<GridApi>();

  const onGridReady = (params: GridReadyEvent) => {
    setGridApi(params.api);
  };

  const onExportClick = () => {
    gridApi?.exportDataAsCsv();
  };

  return (
    <>
      <button onClick={onExportClick}>Export CSV</button>
      <div className="ag-theme-quartz" style={{ height: 500 }}>
        <AgGridReact
          onGridReady={onGridReady}
          rowData={rowData}
          columnDefs={columnDefs}
        />
      </div>
    </>
  );
}

The Grid API is available after the onGridReady event fires.

Event Handling

AG Grid fires events for user interactions and grid state changes.

import { 
  CellClickedEvent, 
  RowSelectedEvent,
  GridReadyEvent 
} from 'ag-grid-community';

export default function App() {
  const onCellClicked = (event: CellClickedEvent) => {
    console.log('Cell clicked:', event.value);
  };

  const onRowSelected = (event: RowSelectedEvent) => {
    console.log('Row selected:', event.node.data);
  };

  const onGridReady = (event: GridReadyEvent) => {
    console.log('Grid is ready');
    event.api.sizeColumnsToFit();
  };

  return (
    <AgGridReact
      rowData={rowData}
      columnDefs={columnDefs}
      onCellClicked={onCellClicked}
      onRowSelected={onRowSelected}
      onGridReady={onGridReady}
      rowSelection="multiple"
    />
  );
}

Custom React Components

You can use React components as cell renderers, editors, and filters.

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

const StatusRenderer = (props: CustomCellRendererProps) => {
  const status = props.value;
  const color = status === 'active' ? 'green' : 'red';
  
  return (
    <span style={{ color, fontWeight: 'bold' }}>
      {status}
    </span>
  );
};

const columnDefs: ColDef[] = [
  { 
    field: 'status',
    cellRenderer: StatusRenderer
  }
];

State Management

Manage grid state with React hooks and state management libraries.

React State
Redux

import { useState, useCallback } from 'react';

export default function App() {
  const [rowData, setRowData] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  const onGridReady = useCallback((params: GridReadyEvent) => {
    setLoading(true);
    fetch('https://api.example.com/data')
      .then(resp => resp.json())
      .then(data => {
        setRowData(data);
        setLoading(false);
      });
  }, []);

  return (
    <AgGridReact
      rowData={rowData}
      columnDefs={columnDefs}
      onGridReady={onGridReady}
      loading={loading}
    />
  );
}

import { useSelector, useDispatch } from 'react-redux';
import { fetchGridData } from './store/gridSlice';

export default function App() {
  const dispatch = useDispatch();
  const { data, loading } = useSelector((state: RootState) => state.grid);

  const onGridReady = () => {
    dispatch(fetchGridData());
  };

  return (
    <AgGridReact
      rowData={data}
      columnDefs={columnDefs}
      onGridReady={onGridReady}
      loading={loading}
    />
  );
}

Key Props Reference

The AgGridReact component accepts all GridOptions as props plus these React-specific properties:

rowData

TData[]

The data to display in the grid rows

columnDefs

ColDef<TData>[]

Column definitions for the grid

gridOptions

GridOptions<TData>

Initial grid configuration (component props take precedence)

modules

Module[]

AG Grid modules to register for this instance

containerStyle

React.CSSProperties

CSS styles for the grid container div

className

string

CSS class for the grid container div

onGridReady

(event: GridReadyEvent) => void

Callback when grid initialization is complete

Module Registration

AG Grid uses a modular architecture. Register only the modules you need.

Global Registration
Per-Grid Registration

import { ModuleRegistry } from 'ag-grid-community';
import { ClientSideRowModelModule } from 'ag-grid-community';
import { ColumnsToolPanelModule } from 'ag-grid-enterprise';
import { MenuModule } from 'ag-grid-enterprise';

// Register once at app startup
ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  MenuModule
]);

export default function App() {
  return (
    <AgGridReact
      rowData={rowData}
      columnDefs={columnDefs}
    />
  );
}

import { ClientSideRowModelModule } from 'ag-grid-community';
import { ColumnsToolPanelModule } from 'ag-grid-enterprise';

export default function App() {
  return (
    <AgGridReact
      rowData={rowData}
      columnDefs={columnDefs}
      modules={[
        ClientSideRowModelModule,
        ColumnsToolPanelModule
      ]}
    />
  );
}

Performance Optimization

Use React.memo for custom components

Prevent unnecessary re-renders of cell renderers:

import { memo } from 'react';

const MyCellRenderer = memo((props: CustomCellRendererProps) => {
  return <span>{props.value}</span>;
});

Memoize column definitions

Use useMemo to prevent column definition recreation:

const columnDefs = useMemo<ColDef[]>(() => [
  { field: 'make' },
  { field: 'model' },
  { field: 'price' }
], []);

Use immutable data updates

When updating row data, create new arrays:

const addRow = () => {
  setRowData(prev => [...prev, newRow]);
};

Enable delta row data mode

For large datasets with frequent updates:

<AgGridReact
  rowData={rowData}
  getRowId={(params) => params.data.id}
/>

Common Patterns

Dynamic Column Definitions

import { useState } from 'react';

export default function App() {
  const [showPrice, setShowPrice] = useState(true);
  
  const columnDefs = useMemo(() => [
    { field: 'make' },
    { field: 'model' },
    ...(showPrice ? [{ field: 'price' }] : [])
  ], [showPrice]);

  return (
    <>
      <label>
        <input
          type="checkbox"
          checked={showPrice}
          onChange={(e) => setShowPrice(e.target.checked)}
        />
        Show Price
      </label>
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
      />
    </>
  );
}

Server-Side Data Loading

import { useEffect, useState } from 'react';
import { GridReadyEvent } from 'ag-grid-community';

export default function App() {
  const [rowData, setRowData] = useState<any[]>([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(resp => resp.json())
      .then(data => setRowData(data));
  }, []);

  return (
    <AgGridReact
      rowData={rowData}
      columnDefs={columnDefs}
    />
  );
}

Troubleshooting

Grid not displaying correctly

Make sure you’ve imported the CSS files:

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

And set a theme class with explicit height:

<div className="ag-theme-quartz" style={{ height: 500 }}>
  <AgGridReact ... />
</div>

TypeScript errors with column definitions

Use the generic type parameter to ensure type safety:

interface MyData {
  name: string;
  age: number;
}

const colDefs: ColDef<MyData>[] = [...];

<AgGridReact<MyData>
  rowData={data}
  columnDefs={colDefs}
/>

Grid API methods not available

Ensure you’re accessing the API after onGridReady fires:

const gridRef = useRef<AgGridReact>(null);

// Wrong: Called immediately
gridRef.current?.api.sizeColumnsToFit(); // API might not be ready

// Correct: Called after grid ready
const onGridReady = () => {
  gridRef.current?.api.sizeColumnsToFit();
};

Next Steps

Column Definitions

Learn how to configure columns

Grid API

Explore the Grid API methods

Custom Components

Build custom cell renderers and editors

Styling

Customize the grid appearance

Get Started

Framework Integration

Core Concepts

Features

Enterprise Features

Customization

Themes

React Integration

Installation

Basic Usage

TypeScript Support

Component Props Interface

Type-Safe Column Definitions

Accessing the Grid API

Event Handling

Custom React Components

State Management

Key Props Reference

Module Registration

Performance Optimization

Common Patterns

Dynamic Column Definitions

Server-Side Data Loading

Troubleshooting

Next Steps

Column Definitions

Grid API

Custom Components

Styling

Get Started

Framework Integration

Core Concepts

Features

Enterprise Features

Customization

Themes

​Installation

​Basic Usage

​TypeScript Support

​Component Props Interface

​Type-Safe Column Definitions

​Accessing the Grid API

​Event Handling

​Custom React Components

​State Management

​Key Props Reference

​Module Registration

​Performance Optimization

​Common Patterns

​Dynamic Column Definitions

​Server-Side Data Loading

​Troubleshooting

​Next Steps

Column Definitions

Grid API

Custom Components

Styling

Installation

Basic Usage

TypeScript Support

Component Props Interface

Type-Safe Column Definitions

Accessing the Grid API

Event Handling

Custom React Components

State Management

Key Props Reference

Module Registration

Performance Optimization

Common Patterns

Dynamic Column Definitions

Server-Side Data Loading

Troubleshooting

Next Steps