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.

Introduction

In order to use selective ag-Grid modules within your application you need to do two things:

• Specify the modules you require as dependencies
• Register the modules you require with the Grid

That's it! In the sections below we expand on these points with examples

Choosing Modules

Please refer to the complete list of modules here.

For our purposes we're going to assume that the application we're building requires the following features:

• Client Side Row Model
• Excel Export
• Context Menu

Recall from earlier documentation that at a minimum you need to provide a Row Model to the Grid and in our case we've opted for the Client Side Row Model.

Additionally we're going to provide Excel Export functionality, so we're going to need the corresponding Excel Module.

Finally, we'd like our users to be able to export the data using the Context Menu, so we'll include that module too.

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

Registering Modules

Now that these modules are available to us we need to import them within our application, and then register them with the Grid:

And that's all that's required. Below are examples using using the above configuration across various frameworks.

We don't list plain JavaScript here as the assumption is that if using JavaScript you'll most likely be using the provided UMD bundles. If you'd like to create a custom UMD bundle please see the section following the examples on how to do so.

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:

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 Balham theme.

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

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:

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:

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