Getting Started

Download ag-Grid Project

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

Referencing ag-Grid Files

ag-Grid is distributed as both a self contained bundle (that places ag-Grid on the global scope) and also via a CommonJS package.

Self Contained Bundle

Using the bundled version is the quickest way to get going, you just put the reference into your HTML page and it works.

<script src="pathToGrid/ag-grid.js"></script>

There are four bundle files in the distribution:

  • dist/ag-grid.js -> standard bundle containing JavaScript and CSS
  • dist/ag-grid.min.js -> minified bundle containing JavaScript and CSS
  • dist/ag-grid.noStyle.js -> standard bundle containing JavaScript without CSS
  • dist/ag-grid.min.noStyle.js -> minified bundle containing JavaScript without CSS

CommonJS

To use CommonJS, it's best to download the packages via NPM and then either require (ECMA 5) or import (ECMA 6) them into your project.

// ECMA 5 - using nodes require() method
var AgGrid = require('ag-grid');

// ECMA 6 - using the system import method
import {Grid} from 'ag-grid/main';

Most single page web-apps use CommonJS and Bundling, so will use the CommonJS version of ag-Grid.

Getting ag-Grid-Enterprise

Download ag-Grid-Enterprise Project

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

Referencing ag-Grid-Enterprise Files

ag-Grid-Enterprise is also distributed as both a self contained bundle and also via a CommonJS package.

Self Contained Bundle

Do not include both ag-Grid and ag-Grid-Enterprise self contained bundles. The ag-Grid-Enterprise contains ag-Grid (that's the nature of Webpack bundles, they have no external dependencies).

Reference the ag-Grid-Enterprise bundle as follows:

<script src="pathToGrid/ag-grid-enterprise.js"></script>

Again similar to ag-Grid, ag-Grid-Enterprise has 4 bundles:

  • dist/ag-grid-enterprise.js -> standard bundle containing JavaScript and CSS
  • dist/ag-grid-enterprise.min.js -> minified bundle containing JavaScript and CSS
  • dist/ag-grid-enterprise.noStyle.js -> standard bundle containing JavaScript without CSS
  • dist/ag-grid-enterprise.min.noStyle.js -> minified bundle containing JavaScript without CSS

Even if you are using React, AngularJS, Angular, VueJS or Web Components, the above is all you need to do. Any grid you create will be an enterprise grid once you load the library.

CommonJS

If using CommonJS, you one need to include ag-Grid-Enterprise into your project. You do not need to execute any code inside it. When ag-Grid-Enterprise loads, it will register with ag-Grid such that the enterprise features are available when you use ag-Grid.

// ECMA 5 - using nodes require() method
var AgGrid = require('ag-grid');
// only include this line if you want to use ag-grid-enterprise
require('ag-grid-enterprise');

// ECMA 6 - using the system import method
import {Grid} from 'ag-grid/main';
// only include this line if you want to use ag-grid-enterprise
import 'ag-grid-enterprise/main';

Additional Framework Projects

If using React or Angular, you will also need to reference the additional ag-Grid project for that framework. Details are provided the documentation for those frameworks.

Bundled vs CommonJS & Frameworks Summary

If you want to use the Angular or React component of ag-Grid, then you have to use the commonjs distribution (not the bundled). You will also need to include the additional ag-Grid project for these components.

If you are using the plain Javascript, Angular 1 or Web Components version of ag-Grid, you can use the bundled version or the commonjs version.

The table below summarises these details.

Framework Works with Bundled Works with CommonJS Extra Project
Pure JavaScript Yes Yes -
React No Yes ag-grid-react
Angular 1 Yes Yes -
Angular No Yes ag-grid-angular
VueJS No Yes ag-grid-vue
Web Components Yes Yes -

Warning: if you are using the bundled version of the grid (/dist/ag-grid-js) then you must specify this directly, the main files specified in package.json and bower.json point to the commonjs versions of ag-Grid.

List of Loading / Building Examples

Below is a list of the examples demonstrating the different build tools, loading mechanisms and frameworks. You may not see the exact stack you want, but you can grab information from all the examples. Eg you might want to program React and Typescript, below you can see examples of React and Typescript, just not together.

Documentation Examples

Almost all the examples in the online documentation use the self contained bundle of ag-Grid and do not use any framework. This is to make the examples as easy to follow (focusing only on what the example is about) and easy to copy and run locally.

Also in the examples, ag-Grid is loaded with an additional parameter "ignore=notused". If you are using the self contained bundle you do not need to include this extra parameter. It's purpose is as a dummy parameter, which the documentation changes every time there is a grid release, to trick the browser in getting the latest version rather than using a cached version.

So eg, the example has this:

<link rel="stylesheet" type="text/css" href="../dist/ag-grid/ag-grid.js?ignore=notused40">
But all you need is this:
<link rel="stylesheet" type="text/css" href="../dist/ag-grid.js">

Choosing a Framework and What Next

ag-Grid does not favor any framework. It's agnostic. It doesn't have a preference what framework you use. ag-Grid supports 5 flavours: React, AngularJS, Angular, VueJS, Web Components and Native Javascript. Every ag-Grid feature is fully available in each framework, there is no bias. You choose which framework you want. So continue now to the section on the framework you are interested in, then jump to the details of how to use the grid.

Browser Support/Compatibility

ag-Grid is compatible with IE 9+, Firefox, Chrome and Safari.