Install ag-Grid with NPM

Both ag-Grid is available through NPM packages. Below is a code example of using ag-Grid with NPM and ECMA 6 imports.

Example: NPM and ECMA 6 Imports

import '@ag-grid-community/all-modules/dist/styles/ag-grid.css' import '@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css'; import {Grid} from '@ag-grid-community/all-modules'; 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 }; var eGridDiv = document.querySelector('#myGrid'); new Grid(eGridDiv, gridOptions);

<html> <head> <title>Ag Grid Javascript Starter Example</title> </head> <body> <div id="myGrid" style="height: 600px;width:500px;" class="ag-theme-balham"></div> </body> </html>

{ "name": "ag-grid-javascript-npm-example", "version": "0.0.0", "private": true, "dependencies": { "@ag-grid-community/all-modules": "latest" } }

Open in

StackBlitz

To install ag-Grid and update your package.json file run:

npm install --save @ag-grid-community/all-modules

To install ag-Grid Enterprise and update your package.json file run:

npm install --save ag-grid-enterprise

Afterwards, depending on your project setup, you can either require or import the module. For ag-grid, you need the ag-grid module:

// ECMA 5 - using nodes require() method var AgGrid = require('@ag-grid-community/all-modules'); // ECMA 6 - using the system import method import {Grid} from '@ag-grid-community/all-modules';

for ag-Grid Enterprise features you need to import the ag-Grid Enterprise package instead:

// ECMA 5 - using nodes require() method var AgGrid = require('@ag-grid-enterprise/all-modules'); // ECMA 6 - using the system import method import {Grid} from '@ag-grid-enterprise/all-modules';

After you have loaded the scripts, you should include the styles in your project. There are several ways to do it, depending on your module bundler and the specifics of your project. The stylesheet files reside in dist/styles/ directory of the ag-grid package - you should include ag-grid.css and the theme of your choice.