AG Grid React: Fast Guide & Tutorial for Data Grids

A concise, practical guide to installing, configuring, and optimizing AG Grid in React — examples, sorting, filtering, pagination, and cell editing included.

What AG Grid does for React apps (quick overview)

AG Grid is a powerful, enterprise-ready React data grid component that provides feature-rich tables: sorting, filtering, pagination, virtualization, editing, and custom cell renderers. It solves the tough parts of interactive tables so you can focus on data and UX rather than re-building core grid logic.

Use cases include admin panels, reporting dashboards, editable spreadsheets, and any UI that needs high-performance tabular rendering. AG Grid is built for both large datasets and complex UI behavior like row grouping, pivoting, and server-side row models.

In this guide you’ll find a compact installation walkthrough, an actionable example with code, and pragmatic performance and integration tips so the grid stays fast and maintainable in production.

AG Grid installation and React setup (step-by-step)

Installing AG Grid for React is straightforward. Pick the community edition to start or the enterprise package if you need advanced features. The core packages are ag-grid-community and ag-grid-react (or ag-grid-enterprise when licensed).

Install via npm or yarn. This example uses npm and assumes React >=16.8 (hooks supported):

npm install --save ag-grid-community ag-grid-react react react-dom
# or, for enterprise features:
# npm install --save ag-grid-enterprise ag-grid-react

Then import the styles and the React wrapper in your component. AG Grid ships with several themes; use one that matches your UI. Example imports:

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

If you’d like a deeper walkthrough, see this practical tutorial: Building Advanced Data Tables with AG Grid in React and the official AG Grid documentation.

Minimal AG Grid React example (complete component)

Here’s a minimal, production-ready example showing setup, column definitions, sorting, filtering, pagination, and simple cell editing. Drop this into a functional component and adapt the columns/data to your schema.

import React, { useMemo, useState } 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';

export default function DataTable() {
  const [rowData] = useState([
    { id:1, name:'Alice', age:30, city:'London' },
    { id:2, name:'Bob', age:24, city:'New York' },
    // ...more rows
  ]);

  const columnDefs = useMemo(() => [
    { field: 'id', sortable:true, filter:'agNumberColumnFilter' },
    { field: 'name', sortable:true, filter:true, editable:true },
    { field: 'age', sortable:true, filter:'agNumberColumnFilter', editable:true },
    { field: 'city', sortable:true, filter:true }
  ], []);

  return (
    <div className="ag-theme-alpine" style={{height:500, width:'100%'}}>
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        pagination={true}
        paginationPageSize={25}
        rowSelection="multiple"
        animateRows={true}
        defaultColDef={{ resizable:true }}
      />
    </div>
  );
}

This example already enables common interactive features: sorting, filtering, pagination, and inline editing. For custom editors, cell renderers, and complex exchanges with your backend, AG Grid’s extension points are essential.

Core concepts: columns, rows, cell editing, filtering, sorting

Column definitions control behavior per column — data field, header name, filters, sortability, and cell editors/renderers. Define reusable defaultColDef for consistent behavior like resizable, sortable, and flexible widths.

Row models determine how data is supplied: client-side (all data in the browser), server-side (server controls paging/grouping), and viewport or infinite scroll models for large datasets. Choose the row model based on dataset size and update frequency.

Cell editing is pluggable: simple editable:true will use the default text editor, while custom editors let you render dropdowns, date pickers, or full components. Combine editing with transactions or immutable updates to keep the React state logic clean.

Performance and best practices for large tables

Large datasets demand virtualization: AG Grid renders only visible rows and columns, which drastically reduces DOM churn. Use the server-side row model when datasets are huge and you need server-driven sorting, filtering, or grouping.

Prefer immutable data updates or delta transactions rather than replacing the entire row array. AG Grid’s API supports applyTransaction and setRowData; immutable mode plus rowId can minimize re-renders and preserve UI state.

Keep column definitions stable (useMemo/useCallback) and avoid re-creating grid options on each render. For heavy custom cell renderers, consider lightweight renderers that reuse DOM or return simple HTML instead of heavy React trees when performance matters.

Advanced capabilities: custom renderers, spreadsheet mode, and API hooks

Custom cell renderers let you inject buttons, badges, charts, or nested components inside cells. AG Grid supports React component renderers that receive cell params, allowing event propagation back to your app.

Spreadsheet mode mimics Excel-like behavior (range selection, copy/paste, multiple editors). If your app needs a spreadsheet UX, enable the relevant grid options and integrate keyboard handlers carefully to avoid conflicts with global shortcuts.

The grid API and column API provide runtime control: you can programmatically sort, filter, export to CSV/Excel, start editing, undo/redo (enterprise), and access selected rows. Keep the gridRef in a ref to call these methods from surrounding UI controls.

Troubleshooting and common pitfalls

If filtering or sorting behaves unexpectedly, check column type and filters (string vs number), and ensure row data types match column expectations. Mis-typed values cause filter and sort anomalies.

Styling issues are usually due to missing theme CSS. Include the appropriate ag-theme CSS file and wrap the grid in a div with that theme class. Also verify height is set on the container; AG Grid needs explicit height to render correctly.

When you see performance regressions, profile re-renders and confirm you aren’t re-creating columnDefs or gridOptions on each render. Move definitions to useMemo and event handlers to useCallback to stabilize identity.

Integration tips: React patterns and backend coordination

Treat AG Grid as a controlled component in complex apps: use callbacks like onGridReady, onRowDataChanged, and the grid API to sync selections and edits with your app state. For optimistic updates, apply transactions locally and reconcile with server responses.

For server-side filtering and paging, implement the server-side row model or custom datasource. Send filter and sort parameters from the grid state to your endpoints, and return rows plus total count for pagination controls.

Combine AG Grid with state management (Redux, Zustand) selectively. Avoid placing large row arrays in global state unless you need cross-component access; instead, fetch and pass rowData as component-local state to reduce global re-renders.

Quick reference: common config snippets

• Enable sorting/filtering: set sortable:true and filter:true per column, or use defaultColDef.
• Pagination: pagination={true} and paginationPageSize={n}.
• Cell editing: editable:true on columnDef, or use cellEditor framework components for custom editors.

These small snippets are often all you need to enable interactive table behavior. For richer interactions (bulk edits, inline validation), wire grid events into your form/validation library.

FAQ

1) How do I install and set up AG Grid in a React project?

Install ag-grid-react and ag-grid-community (or ag-grid-enterprise) via npm/yarn, import the theme CSS, and render AgGridReact in a container with an ag-theme class. Define columnDefs and provide rowData. Example: npm install ag-grid-react ag-grid-community, then import styles and use <AgGridReact />.

2) How can I enable sorting, filtering, and pagination?

Set columnDefs with sortable:true and filter:true (or specific filter types). For pagination, use pagination={true} on AgGridReact and configure paginationPageSize. The grid handles UI controls for sorting and filters automatically.

3) How do I implement cell editing and custom cell renderers?

Use editable:true on columns for simple inline editing. For custom editors or renderers, register React components via columnDefs (cellRendererFramework or cellEditorFramework) and implement the expected AG Grid component lifecycle methods. Handle commit via grid events or transactions.

Micro-markup suggestion: include the above JSON-LD FAQ schema in the page head/body to improve chances of rich results. For article schema, add Article JSON-LD with headline, description, and author.