JavaScript Data GridBuilding Applications With AG Grid Modules
javascript logo

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

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": "~31.1.1",
     "@ag-grid-enterprise/excel-export": "~31.1.1",
     "@ag-grid-enterprise/menu": "~31.1.1"

     //...other dependencies...
 }

Specify What Is Included 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 Quartz 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/styles/ag-grid.css';
 import '@ag-grid-community/styles/ag-theme-quartz.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: 'Boxster', 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');
             var api = agGrid.createGrid(gridDiv, gridOptions);
         });
     </script>
 </head>
 <body>
     <div id="myGrid" style="height: 200px; width:500px;" class="ag-theme-quartz"></div>
 </body>
 </html>