bower install ag-grid
npm install ag-grid
Download from Github
ag-Grid is distributed as both a self contained bundle (that places ag-Grid on the global scope) and also via a CommonJS package.
Using the bundled version is the quickest way to get going - reference this version in your HTML file is all you need to do.
You also need to provide a block (a div is the most common) element for the Grid to use - assign it an ID which you can then use later when instantiating the Grid.
<html> <head> <script src="path-to-ag-grid-/ag-grid.js"></script> <script src="example1.js"></script> </head> <body> <div id="myGrid" style="height: 100%;" class="ag-fresh"></div> </body> </html>
When the ag-Grid script loads, it does not register with AngularJS 1.x. This is because AngularJS 1.x is an optional part of ag-Grid and you need to tell ag-Grid you want to use it.
// if you're using ag-Grid-Enterprise, you'll need to provide the License Key before doing anything else // not necessary if you're just using ag-Grid agGrid.LicenseManager.setLicenseKey("your license key goes here"); // get ag-Grid to create an Angular module and register the ag-Grid directive agGrid.initialiseAgGridWithAngular1(angular); // create your module with ag-Grid as a dependency var module = angular.module("example", ["agGrid"]);
To include a grid in your html, add the ag-grid attribute to a div. The value of the div should be the provided grid options on the scope.
It is also usual to provide a styling theme to the grid. Three themes come with the grid, ag-fresh, ag-dark and ag-blue. Each one is set by applying the corresponding class of the same name to the div. In the example, ag-fresh is used.
You must provide width and height to your grid. The grid is programmed to fill the width and height you give it.
<div ag-grid="gridOptions" class="ag-fresh" style="height: 100%;"></div>
(note: a div by default has 100% width, so the width is not specified explicitly above).
The grid options provide ag-Grid with the details needed to render. At a minimum you should provide the columns (columnDefs) and the rows (rowData).
You do not need to manually clean up the grid. The grid ties in with the AngularJS 1.x lifecycle and releases all resources when the directive is destroyed.