AG Grid Integration

11/5/25Less than 1 minute

For detailed information about AG Grid integration, see the AG Grid Module Documentation.

AG Grid Cookbook

This cookbook demonstrates how to integrate AG Grid data tables and enterprise charting into your Fusion Framework application.

What This Shows

This cookbook illustrates how to:

Enable the AG Grid module with required modules
Create a data grid with columns and rows
Add dynamic row manipulation
Configure column definitions and sidebar panels
Set up enterprise charting with AgChartsEnterpriseModule
Create charts programmatically from grid data

Code Example

Enable AG Grid Module

In src/config.ts, enable AG Grid with required modules:

import type { AppModuleInitiator } from '@equinor/fusion-framework-react-app';
import { enableAgGrid } from '@equinor/fusion-framework-react-ag-grid';
import { ClientSideRowModelModule } from '@equinor/fusion-framework-react-ag-grid/community';
import {
  ClipboardModule,
  ColumnsToolPanelModule,
  ExcelExportModule,
  FiltersToolPanelModule,
  MenuModule,
  IntegratedChartsModule,
  AgChartsEnterpriseModule,
} from '@equinor/fusion-framework-react-ag-grid/enterprise';

export const configure: AppModuleInitiator = (configurator, { env }) => {
  enableAgGrid(configurator, (builder) => {
    builder.setModules([
      ClientSideRowModelModule,    // Client-side row model
      ColumnsToolPanelModule,      // Columns panel in sidebar
      FiltersToolPanelModule,      // Filters panel in sidebar
      MenuModule,                  // Context menu
      ExcelExportModule,           // Excel export functionality
      ClipboardModule,             // Copy/paste functionality
      IntegratedChartsModule.with(AgChartsEnterpriseModule), // Enterprise charts
    ]);
  });
};

Define Column Configuration

In src/table/coldef.tsx:

export const defaultColDef = {
  resizable: true,  // Columns can be resized
  filter: true,     // Columns can be filtered
  flex: 1,         // Columns flex to fill space
  minWidth: 100,   // Minimum column width
  sortable: true,  // Columns can be sorted
};

In src/table/sidebar.tsx:

export const sideBar = {
  toolPanels: [
    {
      id: 'columns',
      labelDefault: 'Columns',
      iconKey: 'columns',
      toolPanel: 'agColumnsToolPanel',
      toolPanelParams: {
        suppressRowGroups: true,
        suppressValues: true,
        suppressPivots: true,
        suppressPivotMode: true,
        suppressColumnFilter: true,
        suppressColumnSelectAll: true,
        suppressColumnExpandAll: true,
      },
    },
    {
      id: 'filters',
      labelDefault: 'Filters',
      iconKey: 'filter',
      toolPanel: 'agFiltersToolPanel',
      toolPanelParams: {
        suppressExpandAll: true,
        suppressFilterSearch: true,
      },
    },
  ],
  defaultToolPanel: '',
};

Use the Grid Component

In src/App.tsx:

import { useCallback, useMemo, useState } from 'react';
import { AgGridReact } from '@equinor/fusion-framework-react-ag-grid';
import { type ColDef } from '@equinor/fusion-framework-react-ag-grid/community';

type RowDataType = {
  make: string;
  model: string;
  price: number;
};

export const App = () => {
  const gridStyle = useMemo(() => ({ height: '400px', width: '100%' }), []);
  const [rowData, setRowData] = useState<RowDataType[]>([]);

  const columnDefs = useMemo<ColDef[]>(() => {
    return [
      { field: 'make' },
      { field: 'model' },
      { field: 'price' },
    ];
  }, []);

  const onGridReady = useCallback(() => {
    setRowData([
      { make: 'Toyota', model: 'Celica', price: 35000 },
      { make: 'Ford', model: 'Mondeo', price: 32000 },
      { make: 'Porsche', model: 'Boxster', price: 72000 },
    ]);
  }, []);

  const addRow = useCallback(() => {
    setRowData([
      ...rowData,
      {
        make: 'Lada',
        model: `Turbo x ${rowData.length}`,
        price: 53200 + rowData.length,
      },
    ]);
  }, [rowData]);

  return (
    <>
      <button type="button" onClick={addRow}>Add Row</button>
      <div style={gridStyle}>
        <AgGridReact
          rowData={rowData}
          columnDefs={columnDefs}
          defaultColDef={defaultColDef}
          sideBar={sideBar}
          rowSelection={{ mode: 'multiRow', checkboxes: true }}
          copyHeadersToClipboard={true}
          allowContextMenuWithControlKey={true}
          onGridReady={onGridReady}
        />
      </div>
    </>
  );
};

Create Charts Programmatically

For enterprise charting, use the grid API to create charts:

import { useRef, useCallback } from 'react';
import { AgGridReact } from '@equinor/fusion-framework-react-ag-grid';

export const ChartsExample = () => {
  const gridRef = useRef<AgGridReact>(null);

  const createSalesChart = useCallback(() => {
    gridRef.current?.api.createRangeChart({
      cellRange: {
        columns: ['region', 'totalSales'],
      },
      chartType: 'groupedBar',
      chartThemeOverrides: {
        common: {
          title: {
            enabled: true,
            text: 'Total Sales by Region',
          },
        },
      },
    });
  }, []);

  return (
    <>
      <button onClick={createSalesChart}>Create Sales Chart</button>
      <AgGridReact ref={gridRef} enableCharts={true} {...props} />
    </>
  );
};