AG Grid Enterprise: Advanced Data Grid Component

35.2.1 · active · verified Sun Apr 19

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.

Common errors

Warnings

Install

Imports

Quickstart

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.");
}

view raw JSON →