AG Grid React: Complete Guide to Setup, Features & Examples

A concise, technical walkthrough to install, configure and optimize AG Grid in React apps — with practical examples, tips for filtering/sorting/pagination, and links to source material. No fluff, just usable guidance (with a dash of irony for your coffee break).

1. Setup & Installation

Getting AG Grid into a React project is intentionally mundane: install packages, include styles, mount the grid. Use your package manager of choice; the minimal install uses ag-grid-community and ag-grid-react. If you rely on the enterprise features, swap in the enterprise package and license it separately.

Typical commands (npm):

npm install --save ag-grid-community ag-grid-react react react-dom
# or
yarn add ag-grid-community ag-grid-react react react-dom

Then import styles and the component in your React code. Place column definitions (columnDefs) and data (rowData) in state or a hook. For a full step-by-step and a friendly tutorial, check the official docs: AG Grid React and the practical walkthrough at AG Grid tutorial on dev.to.

2. Core concepts: columnDefs, row models, and rendering

AG Grid’s mental model revolves around columnDefs (what the grid shows and how each column behaves) and row models (how rows are fetched and stored). For client-side apps, the client-side row model is default and simple. For large datasets, consider the server-side or viewport row model to avoid sending thousands of rows to the browser.

Column definitions control sorting, filtering, cell rendering, and editing. You declare sortable: true, filter: true, editable: true, cellRenderer or valueFormatter. The grid’s API and events—onGridReady, api.setRowData, columnApi—are how you interact programmatically. Think of AG Grid as a programmable table canvas.

Rendering is fast because AG Grid virtualizes rows and reuses DOM nodes. If you need custom cell UI, write lightweight React wrappers for cell renderers and prefer functional components. Avoid large renders inside cell renderers to keep the frame budget low.

3. Minimal AG Grid React example

Below is the canonical minimal implementation. It demonstrates state-driven data, column definitions, and the AgGridReact component.

import React, { useState, useMemo } 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 GridExample(){
  const [rowData] = useState([{ make:'Toyota', model:'Celica', price:35000 }]);
  const columnDefs = useMemo(()=>[
    { field:'make', sortable:true, filter:true },
    { field:'model' },
    { field:'price', editable:true }
  ],[]);

  return (
    <div className="ag-theme-alpine" style={{height:400,width:'100%'}}>
      <AgGridReact rowData={rowData} columnDefs={columnDefs} />
    </div>
  );
}

This snippet covers initialization, sorting, filtering and cell editing basics. For a more advanced, production-ready example (with server-side pagination and immutable data), refer to the official examples and community repositories such as the AG Grid GitHub.

4. Key features & behavior (what to toggle first)

AG Grid ships with a long feature list. Pick the features that deliver immediate value: sorting, filtering, pagination, cell editing, column resizing, and row selection. Enable features intentionally; each adds complexity and potential performance cost.

• Sorting & filtering: per-column flags or custom filters; supports text, number, date, and set filters.
• Pagination & row models: client-side pagination for small datasets; server-side or viewport for large data.
• Cell editing & custom renderers: use lightweight React components for cellRenderer and cellEditor.

Feature toggles are configured in columnDefs or gridOptions. For example, to make a column filterable and sortable: {`{ field: ‘name’, sortable: true, filter: ‘agTextColumnFilter’ }`}. Note: server-side sorting/filtering requires you to send sort/filter state to the backend and return the appropriate data slice.

5. Filtering, sorting and pagination (practical tips)

For basic needs, the built-in filtering and sorting are plug-and-play. Add filter: true or a specific filter type and the UI appears. When users expect multi-column filtering or complex search, define filterParams or implement a custom filter component.

Pagination: client-side pagination maintains all rows in memory and paginates in the UI. It’s trivial and fine for small datasets. For large datasets the correct approach is server-side pagination (or the enterprise Server-Side Row Model), where the grid requests pages from the server via a datasource.

To support voice and featured-snippet queries like “how to enable filtering in ag grid react”, ensure your columnDefs examples include clear code and a one-sentence summary. That improves chances for short answer snippets and voice responses.

6. Cell editing and validation

AG Grid supports simple editors (text, select, date) and custom editors built with React. To enable editing on a column set editable: true and optionally specify a cellEditor component. Validation can be implemented in onCellValueChanged handlers or within a custom cell editor that prevents invalid submissions.

For transactional UX (like spreadsheets), use stopEditingWhenCellsLoseFocus or implement a save button. Delta updates—updating only changed rows rather than replacing everything—keep rendering costs low. Use immutableData:true + getRowId to make row identity stable across updates.

If you need spreadsheet-like behavior, AG Grid has specific features (range selection, copy/paste, fill handle) available in the enterprise edition. For many apps, cell editing + change handlers are enough.

7. Performance & scaling best practices

Performance tuning matters when you cross thousands of rows. First rule: avoid sending massive row arrays to the browser. Use server-side row models or viewport row models to stream data. Second, prefer immutable updates and deltaRowDataMode or immutableData to let AG Grid reconcile rows efficiently.

Third, minimize expensive React components in cell renderers. Keep renderers pure and lightweight. If you need heavy UI, render a placeholder in the cell and defer the heavy component to a sidebar or modal. Use columnDefs.cellRendererSelector to choose renderers dynamically.

Finally, batch updates and debounce rapid value changes. Use requestAnimationFrame or setTimeout to throttle frequent operations, and prefer grid API methods (api.applyTransaction, api.refreshCells with colIds) for targeted updates rather than resetting rowData.

8. Advanced topics: server-side row model, virtualization, and integrations

The server-side row model gives the most control for massive tables: the grid asks for blocks of rows and the server returns them with total row counts. This model supports server-side sorting, filtering and grouping without shipping a full dataset to the client.

Virtualization is built-in: the grid renders only visible rows and reuses DOM nodes. Add column virtualization by using viewport column virtualization settings when columns themselves get numerous. Integrations with libraries like Redux or React Query are straightforward—treat grid state as part of your app state and synchronize via API calls and events.

For keyboard-first apps, configure navigation and accessibility options. AG Grid exposes keyboard navigation modes and cell focus APIs—use them for forms and internal tools where power users expect fast keyboard workflows.

9. Troubleshooting & common pitfalls

Common issues include missing CSS (grid looks broken), forgetting to import ag-theme CSS, or mis-using hooks that recreate columnDefs every render. Use useMemo for columnDefs and defaultColDef to avoid re-render churn. Also, mismatched versions of ag-grid-community and ag-grid-react cause runtime errors—keep the packages in sync.

When sorting/filtering appears to not work with server data, ensure the client communicates sort/filter model to the server. Check network payloads to see what’s being requested and returned. If cell editing behaves oddly, verify getRowId and immutableData settings so the grid can track row identity.

Finally, pay attention to license differences: some grid features are enterprise-only. If a sample uses enterprise-only features, you’ll see console warnings or missing UI elements unless the enterprise package (and license) is in place.

10. Helpful links and references

Primary references and helpful external resources (useful for citations and deeper dives):

• AG Grid React documentation — official guide, API and examples.
• Building Advanced Data Tables with AG Grid in React — community tutorial (provided source).

Semantic core (extended) — clusters, intents & LSI

Base keywords (from your list) expanded into an SEO-focused semantic core grouped by intent and approximate frequency class. Use these phrases naturally across headings, captions and code comments.

Suggested LSI & related phrases: “ag-grid examples”, “react datagrid performance”, “ag-grid custom cell renderer”, “ag-grid enterprise features”, “immutable data ag-grid”.

Popular user questions (PAA & forums synthesis)

Collected likely People Also Ask / forum questions for this topic (source: common SERP PAA patterns and community threads):

• How do I install AG Grid in a React project?
• How to enable filtering and sorting in AG Grid React?
• How to add pagination to AG Grid in React?
• Can AG Grid handle 100k rows in React?
• How to create custom cell renderers in AG Grid React?
• How to use server-side row model with AG Grid?
• What are differences between ag-grid-community and ag-grid-enterprise?
• How to update row data without re-rendering everything?

Top 3 FAQ choices (most actionable / highest search intent):

1. How do I install AG Grid in a React project?
2. How do I enable sorting and filtering in AG Grid React?
3. Can AG Grid handle large datasets in React?

FAQ — short, precise answers

If you want, I can also: analyze current TOP‑10 SERP snapshots for your exact target phrase, produce an optimized H2/H3 outline tuned to competitors, or generate multiple meta title/description A/B variants. Tell me which phrase to prioritize for live SERP analysis.