Framework:javascriptangularreactvue

ag-Grid Building Applications With ag-Grid Modules

In this section we describe how you can cherry pick modules to provide the features you need with a reduced application bundle size.

This page assume that you want to selectively choose modules and do not require all Grid functionality. If you require all Grid features (either Community or Enterprise) then you might be better off using ag-grid-community or ag-grid-enterprise and follow the steps documented in the Getting Started Guides as doing so will require less effort on your part.

Building Your Own UMD Bundle

ag-grid-community and ag-grid-enterprise provide UMD bundles with their distribution for ease of use, and these are great for getting started and making use of all features with very little | effort.

If however you do not need all the features provided by either package (Community or Enterprise) then it's possible to create your own UMD bundle - the rest of this section describes how this can be done.

As with the sections above we're going to assume that we only require the following modules in our bundle:

  • Client Side Row Model
  • Excel Export
  • Context Menu

Specify Our Dependencies

This is what our package.json file will look like based on the requirements above:

"dependencies": {
    "@ag-grid-community/client-side-row-model": "~24.1.0",
    "@ag-grid-enterprise/excel-export": "~24.1.0",
    "@ag-grid-enterprise/menu": "~24.1.0"

    //...other dependencies...
}

Specify What Include in the Bundle

Next we need to include the modules in the bundle we're going to create. We also need to ensure we include the relevant core packages - in our case we need both @ag-grid-community/core and @ag-grid-enterprise/core as we're using both Community and Enterprise features. If you were only using the Community bundle you could omit the @ag-grid-enterprise/core entry here.

Additionally we can include the theme(s) we want to include in our bundle - for our example we're going to specify the Alpine theme.

Let's create a file called main.js that will serve as our entry point:

export * from '@ag-grid-community/core';
export * from '@ag-grid-enterprise/core';
export * from '@ag-grid-community/client-side-row-model';
export * from '@ag-grid-enterprise/menu';
export * from '@ag-grid-enterprise/excel-export';

import { ModuleRegistry } from '@ag-grid-community/core';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import { MenuModule } from '@ag-grid-enterprise/menu';
import { ExcelExportModule } from '@ag-grid-enterprise/excel-export';

ModuleRegistry.register(ClientSideRowModelModule);
ModuleRegistry.register(MenuModule);
ModuleRegistry.register(ExcelExportModule);

import '@ag-grid-community/core/dist/styles/ag-grid.css';
import '@ag-grid-community/core/dist/styles/ag-theme-alpine.css';

Note that we've included the Module Registration step here - we do this so that consumers of our UMD bundle won't have to. This is a convenience step but is recommended for UMD bundles.

Next we'll create a Webpack configuration file:

module.exports = {
    mode: 'production',
    entry: path.resolve(__dirname, '../src/main.js'),
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'bundle.umd.js',
        library: ['agGrid'],
        libraryTarget: 'umd'
    }
}

There are two main items here:

  • entry: We specify the main.js entry file we created that will determine what to include in our bundle.
  • output: We specify a library name of agGrid as the property to export when the bundle is included - this can however be any name you choose.

You can then build your bundle as follows:

webpack --config config/webpack.prod.js

Which will result in a file called dist/bundle.umd.js being created, which we can then use as follows:

<!DOCTYPE html>
<html>
<head>
    <script src="./dist/bundle.umd.js"></script>

    <script>
        var columnDefs = [
            { field: 'make' },
            { field: 'model' },
            { field: 'price' }
        ];

        // specify the data
        var rowData = [
            { make: 'Toyota', model: 'Celica', price: 35000 },
            { make: 'Ford', model: 'Mondeo', price: 32000 },
            { make: 'Porsche', model: 'Boxter', price: 72000 }
        ];

        // let the grid know which columns and what data to use
        var gridOptions = {
            columnDefs: columnDefs,
            rowData: rowData
        };

        // setup the grid after the page has finished loading
        document.addEventListener('DOMContentLoaded', function () {
            var gridDiv = document.querySelector('#myGrid');
            new agGrid.Grid(gridDiv, gridOptions);
        });
    </script>
</head>
<body>
    <div id="myGrid" style="height: 200px; width:500px;" class="ag-theme-alpine"></div>
</body>
</html>

Full working examples of this can be found on GitHub.