Registry / web-framework / ag-grid-community

ag-grid-community

JSON →
library35.2.1jsnpmunverified

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.

npm install ag-grid-community
INSTALL
IMPORT
SIG · AG-GRID-COMMUNITY
A
ag-grid-community
web-frameworkjavascriptv35.2.1
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

Grid
import { Grid } from 'ag-grid-community';
const { Grid } = require('ag-grid-community');
The primary class for instantiating the grid. ESM import is standard for modern applications.
createGrid
import { createGrid } from 'ag-grid-community';
import { Grid } from 'ag-grid-community'; // then new Grid(...)
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.
GridOptions
import type { GridOptions } from 'ag-grid-community';
import { GridOptions } from 'ag-grid-community';
GridOptions is a TypeScript interface used for configuring the grid. It should be imported as a type, not a value, to avoid runtime overhead.
Themes (e.g., themeQuartz)
import { themeQuartz } from 'ag-grid-community';
import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-quartz.css';
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.

This quickstart initializes a basic AG Grid with defined columns and row data, enabling filtering, sorting, and pagination, using the modern Theming API.

import { createGrid, type GridOptions, type ColDef, themeQuartz } from 'ag-grid-community'; // Row Data const rowData = [ { make: 'Tesla', model: 'Model Y', price: 64950, electric: true }, { make: 'Ford', model: 'F-Series', price: 33850, electric: false }, { make: 'Toyota', model: 'Corolla', price: 29600, electric: false }, { make: 'Porsche', model: 'Taycan', price: 81900, electric: true } ]; // Column Definitions const colDefs: ColDef[] = [ { field: 'make', filter: true }, { field: 'model', filter: true }, { field: 'price', sortable: true, valueFormatter: p => '$' + p.value.toLocaleString() }, { field: 'electric' } ]; // Grid Options const gridOptions: GridOptions = { columnDefs: colDefs, rowData: rowData, pagination: true, theme: themeQuartz, // Use the new Theming API onGridReady: (params) => { console.log('Grid is ready:', params.api); // Example: Auto-size columns after data is loaded params.api.sizeColumnsToFit(); } }; // Get a reference to the container element const eGridDiv = document.querySelector<HTMLElement>('#myGrid'); if (eGridDiv) { // Create the grid const { api, columnApi } = createGrid(eGridDiv, gridOptions); // Optionally, expose API for debugging or external interaction (window as any).gridApi = api; (window as any).columnApi = columnApi; } else { console.error('Grid container element #myGrid not found.'); } // Don't forget to add a div with id='myGrid' and some height/width in your HTML // <div id="myGrid" style="height: 400px; width: 600px;"></div>
Debug
Known issues
breakingAG 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.
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(...)`.
affects: >=33.0.0
breakingAG 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`.
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`.
affects: >=35.0.0
gotchaMany 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.
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).
affects: >=1.0.0
gotchaWhen 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.
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`.
affects: >=1.0.0
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading 'api')
Attempting to access `gridApi` or `columnApi` before the grid has been fully initialized or before the `onGridReady` event fires.
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).
Error: Could not find the grid container element.
The HTML element specified as the grid container (e.g., by ID) does not exist in the DOM when the grid initialization code runs.
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>`).
Grid does not render or appears unstyled (missing borders, incorrect fonts, etc.)
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.
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`.
Upgrade
Version history
35.2.1latest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
65 hits · last 30 days
node
58
OpenAI (training)
1
Resources