{"id":10485,"library":"ag-grid-community","title":"AG Grid Community","description":"AG Grid Community is a high-performance, fully-featured, and highly customizable JavaScript Data Grid library, delivering outstanding performance with no third-party dependencies. It provides the core grid functionality and integrates smoothly with all major JavaScript frameworks, including React, Angular, and Vue, often via dedicated framework-specific packages (e.g., `ag-grid-react`). The current stable version is 35.2.1, with frequent minor and patch releases, and major versions typically introduced every few months, ensuring continuous improvement and feature additions. It ships with comprehensive TypeScript types for robust development.","status":"active","version":"35.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/ag-grid/ag-grid","tags":["javascript","ag","ag-grid","datagrid","data-grid","data grid","datatable","data-table","data table","typescript"],"install":[{"cmd":"npm install ag-grid-community","lang":"bash","label":"npm"},{"cmd":"yarn add ag-grid-community","lang":"bash","label":"yarn"},{"cmd":"pnpm add ag-grid-community","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The primary class for instantiating the grid. ESM import is standard for modern applications.","wrong":"const { Grid } = require('ag-grid-community');","symbol":"Grid","correct":"import { Grid } from 'ag-grid-community';"},{"note":"Since v31, `createGrid` is the recommended way to instantiate the grid programmatically, returning the Grid API and Column API. The `new Grid()` constructor is still available but `createGrid` handles initialization more robustly.","wrong":"import { Grid } from 'ag-grid-community'; // then new Grid(...)","symbol":"createGrid","correct":"import { createGrid } from 'ag-grid-community';"},{"note":"GridOptions is a TypeScript interface used for configuring the grid. It should be imported as a type, not a value, to avoid runtime overhead.","wrong":"import { GridOptions } from 'ag-grid-community';","symbol":"GridOptions","correct":"import type { GridOptions } from 'ag-grid-community';"},{"note":"Since v33, AG Grid recommends using the Theming API by importing theme objects (e.g., `themeQuartz`) and passing them to the `gridOptions.theme` property. Direct CSS file imports are deprecated but still supported via `gridOptions.theme = 'legacy'` for backward compatibility.","wrong":"import 'ag-grid-community/styles/ag-grid.css';\nimport 'ag-grid-community/styles/ag-theme-quartz.css';","symbol":"Themes (e.g., themeQuartz)","correct":"import { themeQuartz } from 'ag-grid-community';"}],"quickstart":{"code":"import { createGrid, type GridOptions, type ColDef, themeQuartz } from 'ag-grid-community';\n\n// Row Data\nconst rowData = [\n  { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },\n  { make: 'Ford', model: 'F-Series', price: 33850, electric: false },\n  { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },\n  { make: 'Porsche', model: 'Taycan', price: 81900, electric: true }\n];\n\n// Column Definitions\nconst colDefs: ColDef[] = [\n  { field: 'make', filter: true },\n  { field: 'model', filter: true },\n  { field: 'price', sortable: true, valueFormatter: p => '$' + p.value.toLocaleString() },\n  { field: 'electric' }\n];\n\n// Grid Options\nconst gridOptions: GridOptions = {\n  columnDefs: colDefs,\n  rowData: rowData,\n  pagination: true,\n  theme: themeQuartz, // Use the new Theming API\n  onGridReady: (params) => {\n    console.log('Grid is ready:', params.api);\n    // Example: Auto-size columns after data is loaded\n    params.api.sizeColumnsToFit();\n  }\n};\n\n// Get a reference to the container element\nconst eGridDiv = document.querySelector<HTMLElement>('#myGrid');\n\nif (eGridDiv) {\n  // Create the grid\n  const { api, columnApi } = createGrid(eGridDiv, gridOptions);\n\n  // Optionally, expose API for debugging or external interaction\n  (window as any).gridApi = api;\n  (window as any).columnApi = columnApi;\n} else {\n  console.error('Grid container element #myGrid not found.');\n}\n\n// Don't forget to add a div with id='myGrid' and some height/width in your HTML\n// <div id=\"myGrid\" style=\"height: 400px; width: 600px;\"></div>\n","lang":"typescript","description":"This quickstart initializes a basic AG Grid with defined columns and row data, enabling filtering, sorting, and pagination, using the modern Theming API."},"warnings":[{"fix":"Migrate from CSS imports to the new Theming API. Instead of `import 'ag-grid-community/styles/ag-theme-alpine.css';`, use `import { themeAlpine } from 'ag-grid-community';` and set `gridOptions.theme = themeAlpine;`. For customisation, use `themeAlpine.withParams(...)`.","message":"AG Grid v33 introduced a new Theming API, deprecating direct CSS file imports for themes. While legacy CSS imports (e.g., `import 'ag-grid-community/styles/ag-grid.css';`) are still supported by setting `gridOptions.theme = 'legacy'`, the recommended approach is to import theme objects (e.g., `themeQuartz`) and assign them to the `theme` grid option.","severity":"breaking","affected_versions":">=33.0.0"},{"fix":"Consult the AG Grid v35 migration guide for a full list of removed and renamed APIs. Update your grid configurations and column definitions accordingly. For example, change `pinned: 'left'` to `columnPinned: 'left'` in `ColDef`.","message":"AG Grid v35.0.0 introduced several breaking changes, including the removal of grid options like `rowBuffer`, `groupMultiAutoColumn`, and `animateRows`. Additionally, the `columnDefs.pinned` property was renamed to `columnPinned`.","severity":"breaking","affected_versions":">=35.0.0"},{"fix":"Verify that the feature you intend to use is part of the Community Edition. If it's an Enterprise feature, you will need to acquire an AG Grid Enterprise license and install the `@ag-grid-enterprise/all-modules` package (or specific feature modules).","message":"Many advanced features like Row Grouping with Aggregation, Server-Side Row Model, Excel Export, and Integrated Charts are only available in the AG Grid Enterprise version. Attempting to use these features with `ag-grid-community` will result in missing functionality or runtime errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Install the correct framework package for your project (e.g., `npm install ag-grid-react ag-grid-community`) and import components like `AgGridReact` from that package, configuring it with your `gridOptions`.","message":"When using AG Grid with a JavaScript framework like React, Angular, or Vue, you *must* install and use the corresponding framework-specific package (e.g., `ag-grid-react`, `ag-grid-angular`, `ag-grid-vue`) in addition to `ag-grid-community`. Directly using `ag-grid-community` for rendering framework components will not work as expected.","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":"Ensure you access the `gridApi` and `columnApi` only after the `onGridReady` callback has been invoked, or when they are guaranteed to be available (e.g., by checking for their existence or using the `createGrid` return value).","cause":"Attempting to access `gridApi` or `columnApi` before the grid has been fully initialized or before the `onGridReady` event fires.","error":"TypeError: Cannot read properties of undefined (reading 'api')"},{"fix":"Verify that your HTML file includes a `div` element with the correct `id` and that your JavaScript code is executed after the DOM is fully loaded (e.g., within `DOMContentLoaded` event listener or a script tag at the end of `<body>`).","cause":"The HTML element specified as the grid container (e.g., by ID) does not exist in the DOM when the grid initialization code runs.","error":"Error: Could not find the grid container element."},{"fix":"If using v33+, ensure you are importing and applying a theme object (e.g., `import { themeQuartz } from 'ag-grid-community'; gridOptions.theme = themeQuartz;`). If you are using legacy themes, confirm that you have `gridOptions.theme = 'legacy'` set and are importing both `ag-grid-community/styles/ag-grid.css` and a theme-specific CSS file like `ag-grid-community/styles/ag-theme-alpine.css`.","cause":"The necessary structural or theme CSS styles for AG Grid are not correctly imported or applied. This is a common issue with the v33 theming API change.","error":"Grid does not render or appears unstyled (missing borders, incorrect fonts, etc.)"}],"ecosystem":"npm"}