{"id":12714,"library":"ag-grid-enterprise","title":"AG Grid Enterprise: Advanced Data Grid Component","description":"AG Grid Enterprise is the commercial, feature-rich version of the AG Grid data table component, offering advanced functionalities beyond the community edition such as row grouping, aggregation, master/detail views, server-side row model, integrated charts, and more complex data management capabilities. The current stable version is 35.2.1, with frequent minor releases (typically monthly or bi-monthly) and major version updates occurring approximately once a year. It distinguishes itself from other data grids through its highly performant rendering engine, extensive configurability, and comprehensive feature set, making it suitable for complex enterprise applications requiring sophisticated data manipulation and visualization. It supports integration with JavaScript, TypeScript, React, Angular, and Vue. Notably, a commercial license is required for its use, differentiating it from purely open-source alternatives.","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","datatable","data-table","grid","table","typescript"],"install":[{"cmd":"npm install ag-grid-enterprise","lang":"bash","label":"npm"},{"cmd":"yarn add ag-grid-enterprise","lang":"bash","label":"yarn"},{"cmd":"pnpm add ag-grid-enterprise","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"AG Grid Enterprise builds upon the core functionality of ag-grid-community. It is a mandatory peer dependency.","package":"ag-grid-community","optional":false},{"reason":"Required when using AG Grid with React. Similar packages exist for Angular (ag-grid-angular) and Vue (ag-grid-vue).","package":"ag-grid-react","optional":true}],"imports":[{"note":"The primary React component is a named export. Ensure you have 'ag-grid-react' installed.","wrong":"import AgGridReact from 'ag-grid-react';","symbol":"AgGridReact","correct":"import { AgGridReact } from 'ag-grid-react';"},{"note":"Used to set your commercial license key. This import also implicitly registers enterprise modules.","wrong":"import LicenseManager from 'ag-grid-enterprise';","symbol":"LicenseManager","correct":"import { LicenseManager } from 'ag-grid-enterprise';"},{"note":"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.","wrong":"require('ag-grid-enterprise');","symbol":"Enterprise Modules (side-effect import)","correct":"import 'ag-grid-enterprise';"},{"note":"Core types like GridOptions and ColDef are exported from 'ag-grid-community', not 'ag-grid-enterprise'.","wrong":"import { GridOptions, ColDef } from 'ag-grid-enterprise';","symbol":"GridOptions, ColDef (TypeScript types)","correct":"import { GridOptions, ColDef } from 'ag-grid-community';"}],"quickstart":{"code":"import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { AgGridReact } from 'ag-grid-react';\nimport { LicenseManager, ClientSideRowModelModule } from 'ag-grid-enterprise';\n\nimport 'ag-grid-community/styles/ag-grid.css'; // Core grid CSS\nimport 'ag-grid-community/styles/ag-theme-quartz.css'; // Theme CSS\nimport 'ag-grid-enterprise'; // Import enterprise modules\n\nconst AG_GRID_LICENSE_KEY = process.env.AG_GRID_LICENSE_KEY || 'YOUR_LICENSE_KEY_HERE';\n\nconst GridExample = () => {\n  const gridRef = useRef();\n  const [rowData, setRowData] = useState([\n    { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },\n    { make: 'Ford', model: 'F-Series', price: 33850, electric: false },\n    { make: 'Porsche', model: 'Taycan', price: 83600, electric: true },\n    { make: 'Mercedes', model: 'EQA', price: 48890, electric: true },\n    { make: 'Nissan', model: 'Leaf', price: 29800, electric: true }\n  ]);\n\n  const [colDefs, setColDefs] = useState([\n    { field: 'make', rowGroup: true }, // Example of an enterprise feature: Row Grouping\n    { field: 'model' },\n    { field: 'price', aggFunc: 'sum' }, // Example of an enterprise feature: Aggregation\n    { field: 'electric' }\n  ]);\n\n  // Default column properties for aggregation\n  const defaultColDef = useMemo(() => {\n    return {\n      flex: 1,\n      filter: true,\n      floatingFilter: true,\n      sortable: true,\n      enableValue: true, // Enable aggregation for value columns\n      enableRowGroup: true, // Enable row grouping\n      enablePivot: true // Enable pivoting\n    };\n  }, []);\n\n  useEffect(() => {\n    if (AG_GRID_LICENSE_KEY && AG_GRID_LICENSE_KEY !== 'YOUR_LICENSE_KEY_HERE') {\n      LicenseManager.setLicenseKey(AG_GRID_LICENSE_KEY);\n      console.log('AG Grid License Key set successfully.');\n    } else {\n      console.warn('AG Grid License Key is not set. Using trial mode.');\n    }\n  }, []);\n\n  return (\n    <div className={\"ag-theme-quartz\"} style={{ width: '100%', height: '500px' }}>\n      <AgGridReact\n        ref={gridRef}\n        rowData={rowData}\n        columnDefs={colDefs}\n        defaultColDef={defaultColDef}\n        enableRangeSelection={true} // Another enterprise feature\n        rowGroupPanelShow={'always'} // Show row grouping panel\n        pagination={true}\n      />\n    </div>\n  );\n};\n\nconst container = document.getElementById('root');\nif (container) {\n  const root = createRoot(container);\n  root.render(<GridExample />);\n} else {\n  console.error(\"Root element 'root' not found.\");\n}\n","lang":"typescript","description":"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."},"warnings":[{"fix":"Obtain a commercial license from ag-grid.com and set it using LicenseManager.setLicenseKey('YOUR_LICENSE_KEY'). This should be done before initializing any grid components.","message":"AG Grid Enterprise requires a commercial license for production use. Running without a valid license will result in a watermark and 'AG Grid: License Key not found' warnings in the console.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure you have `import 'ag-grid-enterprise';` (or `require('ag-grid-enterprise');` for CommonJS) somewhere in your application's entry point before AG Grid components are rendered. This side-effect import registers all enterprise modules.","message":"Enterprise features will not activate even with a license key if the 'ag-grid-enterprise' module is not explicitly imported. This is a common oversight.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Before upgrading, review the 'Breaking Changes' section in the release notes for the target version on ag-grid.com/changelog. Test thoroughly in a staging environment.","message":"Major version upgrades (e.g., v34 to v35) often introduce breaking changes, requiring updates to API usage, component imports, or theme configurations. Always consult the official changelog and migration guide.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Always import the core grid CSS (`ag-grid-community/styles/ag-grid.css`) and your chosen theme CSS (`ag-grid-community/styles/ag-theme-quartz.css` or similar) in your application.","message":"AG Grid's styling requires specific CSS files to be imported. Forgetting these or importing them incorrectly will result in an unstyled or poorly rendered grid.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Install the correct framework package: `npm install ag-grid-react` (or angular/vue equivalent).","message":"When using framework-specific components (e.g., AgGridReact, AgGridAngular), ensure the corresponding framework package (`ag-grid-react`, `ag-grid-angular`, `ag-grid-vue`) is installed alongside `ag-grid-community` and `ag-grid-enterprise`.","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":"Call `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.","cause":"The commercial license key has not been set or is incorrect, or the AG_GRID_LICENSE_KEY environment variable is not picked up.","error":"AG Grid: License Key not found. Please contact AG-Grid to get a licence key."},{"fix":"Add `import 'ag-grid-enterprise';` to your application's main entry file or before any grid components are initialized. This registers all necessary enterprise modules.","cause":"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.","error":"AG Grid: unable to find 'RowGroupingModule'. Please check that you are importing the module and it has been provided to the grid."},{"fix":"Type your `useRef` hook correctly: `const gridRef = useRef<AgGridReact>(null);` and access `gridRef.current.api` after the grid is initialized, typically within a `onGridReady` callback.","cause":"Common TypeScript error when `useRef` for `AgGridReact` is not correctly typed or when accessing grid API before it's ready.","error":"Property 'gridApi' does not exist on type 'never'."},{"fix":"Ensure `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`.","cause":"Incorrect path or missing `ag-grid-community` package when trying to import AG Grid CSS styles.","error":"Module not found: Error: Can't resolve 'ag-grid-community/styles/ag-grid.css'"}],"ecosystem":"npm"}