{"id":10484,"library":"ag-grid-react","title":"AG Grid React Component","description":"ag-grid-react is the official React component for AG Grid, a highly performant, fully-featured, and customizable data grid library. It allows developers to integrate advanced table functionalities, such as filtering, sorting, pagination, grouping, aggregation, and extensive customization options, directly into their React applications. The package is currently at version 35.2.1 and maintains a rapid release cadence, frequently delivering new features, performance improvements, and bug fixes across minor versions, with major versions introducing significant architectural changes or API updates. A key differentiator is its focus on enterprise-grade features and performance without relying on external third-party dependencies beyond React itself, making it a robust choice for complex data visualization and manipulation tasks in React environments.","status":"active","version":"35.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/ag-grid/ag-grid","tags":["javascript","react-component","grid","data","table","react","typescript"],"install":[{"cmd":"npm install ag-grid-react","lang":"bash","label":"npm"},{"cmd":"yarn add ag-grid-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add ag-grid-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for the React component.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components.","package":"react-dom","optional":false}],"imports":[{"note":"AgGridReact is the primary component. CommonJS require is generally discouraged in modern React/TypeScript projects.","wrong":"const AgGridReact = require('ag-grid-react');","symbol":"AgGridReact","correct":"import { AgGridReact } from 'ag-grid-react';"},{"note":"These are TypeScript types. Import them from 'ag-grid-community' using `import type` to avoid bundling unnecessary runtime code, especially in environments that don't tree-shake types effectively.","wrong":"import { GridReadyEvent, GridApi, ColDef } from 'ag-grid-community';","symbol":"GridReadyEvent, GridApi, ColDef","correct":"import type { GridReadyEvent, GridApi, ColDef } from 'ag-grid-community';"},{"note":"Styles are imported directly from `ag-grid-community`. Ensure you include both the core grid CSS and a theme CSS. Paths like `ag-grid-react/dist/styles` are legacy or incorrect for direct styling.","wrong":"import 'ag-grid-react/dist/styles/ag-grid.css';","symbol":"AG Grid Styles","correct":"import 'ag-grid-community/styles/ag-grid.css';\nimport 'ag-grid-community/styles/ag-theme-alpine.css';"}],"quickstart":{"code":"import React, { useState, useRef, useMemo, useCallback } from 'react';\nimport { AgGridReact } from 'ag-grid-react';\nimport 'ag-grid-community/styles/ag-grid.css';\nimport 'ag-grid-community/styles/ag-theme-alpine.css';\nimport type { ColDef, GridReadyEvent } from 'ag-grid-community';\n\ninterface RowData {\n  make: string;\n  model: string;\n  price: number;\n}\n\nconst AgGridExample: React.FC = () => {\n  const gridRef = useRef<AgGridReact<RowData>>(null);\n  const [rowData, setRowData] = useState<RowData[]>([\n    { make: 'Toyota', model: 'Celica', price: 35000 },\n    { make: 'Ford', model: 'Mondeo', price: 32000 },\n    { make: 'Porsche', model: 'Boxster', price: 72000 },\n    { make: 'BMW', model: 'M5', price: 60000 },\n    { make: 'Audi', model: 'A4', price: 45000 },\n  ]);\n\n  const [columnDefs] = useState<ColDef[]>([\n    { field: 'make', filter: true, sortable: true },\n    { field: 'model', filter: true, sortable: true },\n    { field: 'price', filter: true, sortable: true, valueFormatter: p => '€' + (p.value as number).toLocaleString() },\n  ]);\n\n  const defaultColDef = useMemo<ColDef>(() => ({\n    flex: 1,\n    minWidth: 100,\n    resizable: true,\n  }), []);\n\n  const onGridReady = useCallback((params: GridReadyEvent) => {\n    // Can use params.api to interact with the grid, e.g., fetch data dynamically\n    // params.api.sizeColumnsToFit();\n  }, []);\n\n  const clearFilters = useCallback(() => {\n    gridRef.current?.api.setFilterModel(null);\n  }, []);\n\n  return (\n    <div className=\"ag-theme-alpine\" style={{ height: 400, width: 600 }}>\n      <button onClick={clearFilters} style={{marginBottom: '10px'}}>Clear All Filters</button>\n      <AgGridReact\n        ref={gridRef}\n        rowData={rowData}\n        columnDefs={columnDefs}\n        defaultColDef={defaultColDef}\n        onGridReady={onGridReady}\n        pagination={true}\n        paginationPageSize={10}\n        animateRows={true}\n      />\n    </div>\n  );\n};\n\nexport default AgGridExample;","lang":"typescript","description":"Demonstrates a basic AG Grid React component with static data, custom column definitions including formatting, and basic grid features like filtering, sorting, and pagination. It also shows how to programmatically clear filters using the Grid API via a ref, and includes essential CSS imports."},"warnings":[{"fix":"Review the AG Grid v35 migration guide. Update export configurations to use the new `exportDataAsCsv` and `exportDataAsExcel` methods on the `GridApi`, which now accept a single object parameter for configuration instead of individual arguments. Refer to the official documentation for specific property replacements.","message":"In AG Grid v35.0.0, the `defaultExportParams` and `excelExportParams` properties are no longer supported. These have been replaced by new granular options within the `gridOptions` configuration.","severity":"breaking","affected_versions":">=35.0.0"},{"fix":"Consult the AG Grid v35 migration guide, specifically the section on 'Integrated Charts'. Adjust charting configurations and module imports to align with the new modular API.","message":"AG Grid v35.0.0 introduced significant updates to the `chartToolbar` property and integrated charting modules, moving towards a more modular and extensible charting API. Direct usage of previous charting configurations may break.","severity":"breaking","affected_versions":">=35.0.0"},{"fix":"Remove `cellDataType` from `columnTypes` definitions. For `autoGroupColumnDef`, use `autoGroupColumnDef.context` to store any auto-group column specific data instead of `colId`.","message":"The `cellDataType` property has been removed from the `columnTypes` type as its value was always ignored. Similarly, `colId` has been removed from `autoGroupColumnDef` type.","severity":"breaking","affected_versions":">=35.0.0"},{"fix":"Always include `import 'ag-grid-community/styles/ag-grid.css';` for core styles and `import 'ag-grid-community/styles/ag-theme-your-theme.css';` (e.g., `ag-theme-alpine.css`) for a visual theme in your application's entry point or relevant component.","message":"AG Grid requires both core CSS and a theme CSS to render correctly. Forgetting to import these styles will result in an unstyled or visually broken grid.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure you are using `ag-grid-enterprise` if you require enterprise features. This typically involves importing the enterprise module (`import 'ag-grid-enterprise';`) and having a valid license key set via `LicenseManager.setLicenseKey('YOUR_LICENSE_KEY');` before the grid initializes. Otherwise, stick to community-edition features.","message":"Using the free AG Grid Community Edition but attempting to use Enterprise-only features (e.g., Row Grouping, Advanced Filters, Master/Detail) will result in console warnings or disabled functionality.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Always guard access to `gridRef.current.api` (e.g., `gridRef.current?.api.setFilterModel(...)`) or ensure the operation is performed after the `onGridReady` callback fires, which guarantees the `api` is available.","cause":"Attempting to call `api` methods on a `gridRef.current` that is `null` or `undefined`, often before the grid is fully initialized or when the component is unmounted.","error":"TypeError: Cannot read properties of undefined (reading 'setFilterModel')"},{"fix":"Verify that `ag-grid-community` is installed (`npm install ag-grid-community`) and that the import paths for the CSS files are correct as per the official documentation (`import 'ag-grid-community/styles/ag-grid.css';`).","cause":"Incorrect path or missing installation of `ag-grid-community` or its styles.","error":"Module not found: Error: Can't resolve 'ag-grid-community/styles/ag-grid.css'"},{"fix":"Ensure all column definitions have unique `field` properties if `colId` is not explicitly set, or assign unique `colId` values manually for more control. Review `columnDefs` updates to ensure consistency.","cause":"This often occurs when `columnDefs` are not properly defined or updated, leading to columns without unique `colId` values, especially when using complex column definitions or dynamic updates.","error":"Error: AG Grid: invalid colId 'undefined' supplied to column API."}],"ecosystem":"npm"}