AG Grid Enterprise: Advanced Data Grid Component

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