Use @equinor/fusion-framework-react-ag-grid for application-level AG Grid integration.
If you need charting inside AG Grid, AG Charts is now provided by a separate package: @equinor/fusion-framework-react-ag-charts.
For standalone charts, see the Charts guide.

AG Grid React for Fusion Framework

Installation

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

Configuration

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

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

Important

Since ag-grid is re-exported from this package, node has a hard time resolving the correct types.
The solution for now is to have "moduleResolution": "bundler" in your tsconfig.json.

Theming

Theming will be provided the host (portal) which configures AG Grid for the applications. But the application can override the theme by providing a custom theme.

enableAgGrid(configurator, (builder) => {
    builder.setTheme((theme) => {
        return theme.withParams({
            backgroundColor: "#1f2836",
            browserColorScheme: "dark",
            chromeBackgroundColor: {
                ref: "foregroundColor",
                mix: 0.07,
                onto: "backgroundColor"
            },
            foregroundColor: "#FFF",
            headerFontSize: 14
        });
    });
});

Tips

AG Grid has a theme builder that can be used to preview and generate a custom theme.

Enterprise and Community Features

Enterprise features are available from the namespace @equinor/fusion-framework-react-ag-grid/enterprise.

Community features are available from the namespace @equinor/fusion-framework-react-ag-grid/community.

Integrated Charts

To use AG Charts within AG Grid, install the separate @equinor/fusion-framework-react-ag-charts package and use the IntegratedChartsModule:

npm i @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';

// Use in AG Grid configuration
enableAgGrid(configurator, (builder) => {
    builder.addModule(IntegratedChartsModule.with(AgChartsEnterpriseModule));
});

Note

AG Charts is now a standalone package. See @equinor/fusion-framework-react-ag-charts for standalone chart usage.

Customizing a grid instance

The module provides a hook to customize a grid instance.

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

const MyComponent = () => {
    const baseTheme = useTheme();
    const [hasError, setHasError] = useState(false);
    const theme = useMemo(() => baseTheme.withParams({
        // add red text color if error
        cellTextColor: hasError ? "#FF0000" : baseTheme.cellTextColor,
    }), [baseTheme, hasError]);

    return (
        <AgGridReact
            theme={theme}
            ...
        />
    );
};

Upgrading to v35

Breaking Changes

AG Charts Separated: AG Charts functionality has been moved to a separate package @equinor/fusion-framework-react-ag-charts.

Migration Required:

// 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));
});

Dependencies: Update peer dependencies to v35:

• ag-grid-community >= 35.1.0
• ag-grid-enterprise >= 35.1.0

Upgrading from v32 to v33

Before upgrading to AG Grid 33, 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. All references to ag-grid should be removed.