@equinor/fusion-framework-react-ag-grid

React integration for AG Grid within Fusion Framework applications.

This package provides a pre-configured AG Grid setup with the Equinor Design System theme, license management, and module registration — so every grid in the application shares consistent styling and configuration out of the box.

Who Should Use This

Any Fusion Framework React application that needs a data grid with sorting, filtering, grouping, inline editing, or Excel export. If you are building a standalone app outside Fusion Framework, use ag-grid-react directly instead.

Quick Start

Install

pnpm add @equinor/fusion-framework-react-ag-grid

Enable the Module

Register the AG Grid module during application configuration:

import { enableAgGrid } from '@equinor/fusion-framework-react-ag-grid';

export const configure = (configurator) => {
  enableAgGrid(configurator);
};

Render a Grid

import { AgGridReact } from '@equinor/fusion-framework-react-ag-grid';
import { useTheme } from '@equinor/fusion-framework-react-ag-grid';
import type { ColDef } from '@equinor/fusion-framework-react-ag-grid/community';

const columns: ColDef[] = [
  { field: 'name' },
  { field: 'age', filter: 'agNumberColumnFilter' },
];

const MyGrid = ({ rows }) => {
  const theme = useTheme();
  return <AgGridReact theme={theme} rowData={rows} columnDefs={columns} />;
};

[!IMPORTANT] Since AG Grid types are re-exported from this package, TypeScript may have trouble resolving them. Set "moduleResolution": "bundler" in your tsconfig.json to fix type-resolution issues.

Key Concepts

API Surface

Main Entry Point (@equinor/fusion-framework-react-ag-grid)

Community Entry Point (@equinor/fusion-framework-react-ag-grid/community)

Re-exports everything from ag-grid-community — column definitions, cell renderers, row models, events, and utilities.

Enterprise Entry Point (@equinor/fusion-framework-react-ag-grid/enterprise)

Re-exports everything from ag-grid-enterprise — row grouping, tree data, server-side row model, Excel export, integrated charts, and more. Requires a valid license key.

React Entry Point (@equinor/fusion-framework-react-ag-grid/react)

Re-exports everything from ag-grid-react — components, props, hooks, and utilities.

Themes Entry Point (@equinor/fusion-framework-react-ag-grid/themes)

Common Patterns

Customize the Global Theme

Override theme parameters during module configuration:

enableAgGrid(configurator, (builder) => {
  builder.setTheme((theme) => {
    return theme.withParams({
      backgroundColor: '#1f2836',
      browserColorScheme: 'dark',
      foregroundColor: '#FFF',
      headerFontSize: 14,
    });
  });
});

[!TIP] AG Grid has a theme builder for previewing and generating custom theme parameters.

Override Theme per Grid Instance

Use useTheme to get the base theme, then customize it for a specific grid:

import { useTheme } from '@equinor/fusion-framework-react-ag-grid';
import { AgGridReact } from '@equinor/fusion-framework-react-ag-grid';
import { useMemo, useState } from 'react';

const MyComponent = () => {
  const baseTheme = useTheme();
  const [hasError, setHasError] = useState(false);

  const theme = useMemo(
    () => baseTheme.withParams({ cellTextColor: hasError ? '#FF0000' : undefined }),
    [baseTheme, hasError],
  );

  return <AgGridReact theme={theme} /* ...other props */ />;
};

Use AG Grid Integrated Charts

Install the separate charts package and register IntegratedChartsModule:

pnpm add @equinor/fusion-framework-react-ag-charts

import { IntegratedChartsModule } from '@equinor/fusion-framework-react-ag-grid/enterprise';
import { AgChartsEnterpriseModule } from '@equinor/fusion-framework-react-ag-charts/enterprise';

enableAgGrid(configurator, (builder) => {
  builder.addModule(IntegratedChartsModule.with(AgChartsEnterpriseModule));
});

[!NOTE] AG Charts is a standalone package since v35. See @equinor/fusion-framework-react-ag-charts for standalone chart usage.

Testing

Without a license key, AG Grid Enterprise logs a "License Key Not Found" banner through console.error on every grid mount. Call suppressAgGridLicenseBanner once from your test setup file to filter just that banner:

// src/test/setupTests.ts
import { suppressAgGridLicenseBanner } from '@equinor/fusion-framework-react-ag-grid/testing';

suppressAgGridLicenseBanner();

Upgrade Guides

Upgrading to v35

AG Charts separated: Chart functionality moved to @equinor/fusion-framework-react-ag-charts.

// Before (v34)
import { AgChartsEnterpriseModule } from '@equinor/fusion-framework-react-ag-grid/enterprise';

// After (v35)
import { IntegratedChartsModule } from '@equinor/fusion-framework-react-ag-grid/enterprise';
import { AgChartsEnterpriseModule } from '@equinor/fusion-framework-react-ag-charts/enterprise';

enableAgGrid(configurator, (builder) => {
  builder.addModule(IntegratedChartsModule.with(AgChartsEnterpriseModule));
});

Peer dependencies: Update to ag-grid-community and ag-grid-enterprise >= 35.1.0.

Upgrading from v32 to v33

Remove all previous references to @equinor/fusion-react-ag-grid-styles, @ag-grid-community/*, and @ag-grid-enterprise/* from your project dependencies. Only @equinor/fusion-framework-react-ag-grid should be installed.