Install ag-Grid with NPM
ag-Grid is available through NPM packages. Below is a code example of using ag-Grid with NPM
and ECMA 6 imports.
import 'ag-grid-community/dist/styles/ag-grid.css'
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import { Grid } from 'ag-grid-community';
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-alpine"></div>
</body>
</html>
{
"name": "ag-grid-javascript-npm-example",
"version": "0.0.0",
"private": true,
"dependencies": {
"ag-grid-community": "latest"
}
}
To install ag-Grid and update your package.json file run:
npm install --save ag-grid-community
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');
// ECMA 6 - using the system import method
import { Grid } from 'ag-grid-community';
For ag-Grid Enterprise features, import the ag-grid-enterprise package for it to be included in your
application:
import 'ag-grid-enterprise';
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.
StackBlitz