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>
Web Components are reusable user interface widgets that are created using open Web technology. They are part of the browser and so they do not depend on external libraries such as AngularJS 1.x or JQuery.
Web Components are of particular interest to ag-Grid as I see them as the future for reusable components. A true Web Component will be reusable in any framework. Angular's directives are based on Web Components.
When using Web Components, you have the choice of using the bundled version of ag-Grid or the CommonJS version.
When the ag-Grid script loads, it does not register the Web Component. This is because the Web Component is an optional part of ag-Grid and you need to tell ag-Grid you want to use it.
// get ag-Grid to install the web component agGrid.initialiseAgGridWithWebComponents();
var myGrid = document.querySelector('#myGrid'); myGrid.setGridOptions(gridOptions);
The example below shows a simple grid using Web Components.
To get the grid to release resources, call api.destroy(). If you do not do this, old grids will hang around and add to a memory leak problem in your application.