AG Grid

React data tables with sorting, filtering, pagination, inline editing, and Excel-like features. TypeScript typing, accessibility, and virtualization.

Examples use ag-grid-react. Column config API (ColDef, onGridReady) is framework-agnostic — adapt cell renderers to your framework's component syntax for Angular/Vue.

When to Use

Data tables with sorting/filtering/pagination
Editable grids with inline editing
Complex grids with grouping/aggregation
High-performance with virtualization
Excel-like functionality

Don't use for:

Simple tables (use HTML/MUI Table)
Non-tabular viz (use charts)
Mobile-first (consider simpler)

Critical Patterns

✅ REQUIRED: Use TypeScript Interfaces for Type Safety

// ✅ CORRECT: Typed column definitions
import { ColDef } from "ag-grid-community";

interface RowData {
  id: number;
  name: string;
}

const columnDefs: ColDef<RowData>[] = [{ field: "id" }, { field: "name" }];

// ❌ WRONG: Untyped columns
const columnDefs = [{ field: "id" }, { field: "name" }];

✅ REQUIRED: Use defaultColDef for Common Settings

// ✅ CORRECT: DRY column configuration
const defaultColDef: ColDef = {
  sortable: true,
  filter: true,
  resizable: true,
};

<AgGridReact defaultColDef={defaultColDef} />

// ❌ WRONG: Repeating config for each column
const columnDefs = [
  { field: 'id', sortable: true, filter: true, resizable: true },
  { field: 'name', sortable: true, filter: true, resizable: true },
];

✅ REQUIRED: Enable Accessibility Features

// ✅ CORRECT: Accessibility enabled
<AgGridReact
  enableAccessibility={true}
  suppressMenuHide={false}
/>

Conventions

AG Grid Specific

TypeScript interfaces for columns
Cell renderers for custom content
Apply accessibility best practices: keyboard navigation, screen reader support, ARIA attributes
Built-in features over custom
Handle loading/error states

Decision Tree

Custom cells? → Use cellRenderer/cellRendererFramework.

Editable? → editable: true, handle onCellValueChanged.

Filtering? → filter: true or specify type (agTextColumnFilter, agNumberColumnFilter).

Large dataset? → rowModelType: 'infinite' for server pagination.

Grouping? → rowGroup: true on columns.

Export? → exportDataAsCsv()/exportDataAsExcel().

Performance? → Virtualization (default), immutableData: true for React.

Example

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

interface RowData {
  id: number;
  name: string;
  value: number;
}

const columnDefs: ColDef<RowData>[] = [
  { field: 'id', headerName: 'ID' },
  { field: 'name', headerName: 'Name', sortable: true },
  { field: 'value', headerName: 'Value', filter: 'agNumberColumnFilter' }
];

<AgGridReact<RowData>
  rowData={data}
  columnDefs={columnDefs}
  defaultColDef={{ flex: 1, minWidth: 100 }}
/>

Edge Cases

Empty data → appropriate messaging
Loading states during fetch
Error boundaries for failures
Resize events properly
Test keyboard navigation

ag-grid