Expand All

  Getting Started

  Interfacing

  Features

  Row Models

  Themes

  Components

  Examples

  Third Party

Misc

Github stars make projects look great. Please help, donate a star, it's free.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Getting Started

Download ag-Grid

Bower
bower install ag-grid
NPM
npm install ag-grid
Github
Download from Github

Referencing ag-Grid

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.

Creating the AngularJS 1.x Module

Include ag-Grid as a dependency of your module like this:

// 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"]);

ag-Grid Div

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).

Grid Options

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).

Basic AngularJS 1.x Example

Destroy

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.