Building ag-Grid with Rollup.js

We walk through the main steps required when using ag-Grid with Rollup.js.

A full working example of using Rollup.js with ag-Grid can be found on Github. This walkthrough uses the @ag-grid-community/all-modules package which will include all features of ag-Grid. If you're using Rollup to reduce your bundle size you probably want to be selective in which packages you include - please see the Modules documentation for more information.

Initialise Project

mkdir ag-grid-rollup cd ag-grid-rollup npm init --yes

Install Dependencies

npm i --save @ag-grid-community/all-modules // or, if using Enterprise features npm i --save @ag-grid-enterprise/all-modules npm i --save-dev rollup rollup-plugin-node-resolve

Create Application

Our application will be a very simple one, consisting of a single file that will render a simple grid:

// main-ag-grid.js import {Grid} from '@ag-grid-community/all-modules' // or, if using enterprise features // import {Grid} from '@ag-grid-enterprise/all-modules' // specify the columns var columnDefs = [ {headerName: "Make", field: "make"}, {headerName: "Model", field: "model"}, {headerName: "Price", 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 }; // lookup the container we want the Grid to use var eGridDiv = document.querySelector('#myGrid'); // create the grid passing in the div to use together with the columns & data we want to use new Grid(eGridDiv, gridOptions); <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="./node_modules/@ag-grid-community/all-modules/dist/styles/ag-grid.css"> <link rel="stylesheet" href="./node_modules/@ag-grid-community/all-modules/dist/styles/ag-theme-alpine.css"> </head> <body> <div id="myGrid" style="height: 200px;width:500px;" class="ag-theme-alpine"></div> <script src="./dist/ag-bundle.js"></script> </body> </html>

Rollup Configuration

Our rollup.ag-grid.json is very simple in this example:

const node = require('rollup-plugin-node-resolve'); export default { input: './main-ag-grid.js', output: { file: './dist/ag-bundle.js', format: 'umd', }, plugins: [ node() ], onwarn: (msg, warn) => { if (msg.code === 'THIS_IS_UNDEFINED') return; if (!/Circular/.test(msg)) { warn(msg) } } };

Building our bundle

We can now build our bundle:

rollup -c rollup.ag-grid.config.js

The resulting bundle will be available in ./dist/ag-bundle.js

If we now serve index-ag-grid.html our grid will be rendered as expected:

Bundled Grid