AG-Grid

Ag-Grid Cookbook

You can easily setup AG Grid in fusion-framework enabled apps by following these steps:

• Setup Ag Grid lisencing according to the enableAgGrid guide.
• Install the required @ag-grid-community packages
  • @ag-grid-community/core
  • @ag-grid-community/react
• Install the package: @equinor/fusion-react-ag-grid-styles to use the alpine-fusion theme.

AG Grid version

The version of ag grid you install should be the same version as the license key or lower. The current licensed version is: 31.2.0.

See the AG-Grid cookbok app for a working example with modules.

Alpine Fusion theme

import AgGridReact from '@ag-grid-community/react';
import useStyles from '@equinor/fusion-react-ag-grid-styles';

const MyComponent = (): JSX.Element => {
    const styles = useStyles();

    // aggrid effects...

    return (
        <div className={styles.root}>
            <div className="ag-theme-alpine-fusion">
                <AgGridReact {...agGridProps} />
            </div>
        </div>
    );
};

Licencing

Licensing works in production builds so you get an unlicensed warning in your console when running from CLI.

AG Grid documentation

The AG Grid documentation provides examples for advanced use cases.