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
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
AgGridReact
✓ import { AgGridReact } from 'ag-grid-react';
✗ import AgGridReact from 'ag-grid-react';
The primary React component is a named export. Ensure you have 'ag-grid-react' installed.
LicenseManager
✓ import { LicenseManager } from 'ag-grid-enterprise';
✗ import LicenseManager from 'ag-grid-enterprise';
Used to set your commercial license key. This import also implicitly registers enterprise modules.
Enterprise Modules (side-effect import)
✓ import 'ag-grid-enterprise';
✗ require('ag-grid-enterprise');
This side-effect import is crucial for registering all enterprise features (like row grouping, master/detail, etc.) into the grid instance. If omitted, enterprise features will not be available even with a valid license.
GridOptions, ColDef (TypeScript types)
✓ import { GridOptions, ColDef } from 'ag-grid-community';
✗ import { GridOptions, ColDef } from 'ag-grid-enterprise';
Core types like GridOptions and ColDef are exported from 'ag-grid-community', not 'ag-grid-enterprise'.
This quickstart demonstrates a basic AG Grid Enterprise setup using React and TypeScript, including setting a license key and showcasing enterprise features like row grouping and aggregation. It also includes necessary CSS imports.
import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
import { createRoot } from 'react-dom/client';
import { AgGridReact } from 'ag-grid-react';
import { LicenseManager, ClientSideRowModelModule } from 'ag-grid-enterprise';
import 'ag-grid-community/styles/ag-grid.css'; // Core grid CSS
import 'ag-grid-community/styles/ag-theme-quartz.css'; // Theme CSS
import 'ag-grid-enterprise'; // Import enterprise modules
const AG_GRID_LICENSE_KEY = process.env.AG_GRID_LICENSE_KEY || 'YOUR_LICENSE_KEY_HERE';
const GridExample = () => {
const gridRef = useRef();
const [rowData, setRowData] = useState([
{ make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
{ make: 'Ford', model: 'F-Series', price: 33850, electric: false },
{ make: 'Porsche', model: 'Taycan', price: 83600, electric: true },
{ make: 'Mercedes', model: 'EQA', price: 48890, electric: true },
{ make: 'Nissan', model: 'Leaf', price: 29800, electric: true }
]);
const [colDefs, setColDefs] = useState([
{ field: 'make', rowGroup: true }, // Example of an enterprise feature: Row Grouping
{ field: 'model' },
{ field: 'price', aggFunc: 'sum' }, // Example of an enterprise feature: Aggregation
{ field: 'electric' }
]);
// Default column properties for aggregation
const defaultColDef = useMemo(() => {
return {
flex: 1,
filter: true,
floatingFilter: true,
sortable: true,
enableValue: true, // Enable aggregation for value columns
enableRowGroup: true, // Enable row grouping
enablePivot: true // Enable pivoting
};
}, []);
useEffect(() => {
if (AG_GRID_LICENSE_KEY && AG_GRID_LICENSE_KEY !== 'YOUR_LICENSE_KEY_HERE') {
LicenseManager.setLicenseKey(AG_GRID_LICENSE_KEY);
console.log('AG Grid License Key set successfully.');
} else {
console.warn('AG Grid License Key is not set. Using trial mode.');
}
}, []);
return (
<div className={"ag-theme-quartz"} style={{ width: '100%', height: '500px' }}>
<AgGridReact
ref={gridRef}
rowData={rowData}
columnDefs={colDefs}
defaultColDef={defaultColDef}
enableRangeSelection={true} // Another enterprise feature
rowGroupPanelShow={'always'} // Show row grouping panel
pagination={true}
/>
</div>
);
};
const container = document.getElementById('root');
if (container) {
const root = createRoot(container);
root.render(<GridExample />);
} else {
console.error("Root element 'root' not found.");
}
Errors
Common errors & fixes
AG Grid: License Key not found. Please contact AG-Grid to get a licence key.
The commercial license key has not been set or is incorrect, or the AG_GRID_LICENSE_KEY environment variable is not picked up.
fixCall `LicenseManager.setLicenseKey('YOUR_LICENSE_KEY_HERE')` once in your application's entry point, replacing 'YOUR_LICENSE_KEY_HERE' with your actual license key. Ensure this happens before any grid components are rendered. AG Grid: unable to find 'RowGroupingModule'. Please check that you are importing the module and it has been provided to the grid.
An enterprise feature module (like Row Grouping) was used in the `GridOptions` or `ColDef` but the `ag-grid-enterprise` package was not imported, preventing its registration.
fixAdd `import 'ag-grid-enterprise';` to your application's main entry file or before any grid components are initialized. This registers all necessary enterprise modules.
Property 'gridApi' does not exist on type 'never'.
Common TypeScript error when `useRef` for `AgGridReact` is not correctly typed or when accessing grid API before it's ready.
fixType your `useRef` hook correctly: `const gridRef = useRef<AgGridReact>(null);` and access `gridRef.current.api` after the grid is initialized, typically within a `onGridReady` callback.
Module not found: Error: Can't resolve 'ag-grid-community/styles/ag-grid.css'
Incorrect path or missing `ag-grid-community` package when trying to import AG Grid CSS styles.
fixEnsure `ag-grid-community` is installed (`npm install ag-grid-community`) and verify the CSS import paths. They typically are `ag-grid-community/styles/ag-grid.css` and `ag-grid-community/styles/ag-theme-YOURTHEME.css`.
Audit
Dependencies
ag-grid-communityrequiredAG Grid Enterprise builds upon the core functionality of ag-grid-community. It is a mandatory peer dependency.
ag-grid-reactoptionalRequired when using AG Grid with React. Similar packages exist for Angular (ag-grid-angular) and Vue (ag-grid-vue).