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 Resources https://www.ag-grid.com/react-data-grid/ https://www.ag-grid.com/react-data-grid/accessibility/