JavaScript Grid

Download ag-Grid

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

You can reference the ag-Grid library directly via a CDN (for example, unpkg or cloudflare):

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

You can also download the library in the following ways:

NPM install ag-Grid NPM
npm install ag-grid-community
  Github install ag-Gridinstall ag-Grid Github
Download from Github
  Bower install ag-Grid Bower
bower install ag-grid-community

You could then reference the ag-Grid library in a similar way to the CDN method above, but from a local filesystem:

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

Here we're illustrating how you can reference the ag-Grid library when using npm, but the same principle would apply when using bower.

ag-Grid Bundle Types

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

JavaScript modules

To consume ag-Grid as a module, 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-community';

Download ag-Grid-Enterprise

As with the main ag-Grid library above, the ag-Grid-Enterprise library is also distributed as both a self contained bundle and also via a JavaScript module package.

If you're using the bundled version you only need the bundled version (i.e. ag-grid-enterprise.js), but if you're using the module package then you'll require both the ag-grid and ag-grid-enterprise dependency.

If you're using the bundled version, you can reference the ag-Grid-Enterprise library via CDN:

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

But you can also download the library in the following ways:

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

You could then reference the ag-Grid library in a similar way to the CDN method above, but from a local filesystem:

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

ag-Grid Enterprise Bundle Types

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

JavaScript modules

If using modules, you only need to include ag-Grid-Enterprise into your project. You do not need to import anything from the package. 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-community'; // only include this line if you want to use ag-grid-enterprise import 'ag-grid-enterprise';

The Enterprise dependency has to be made available before any Grid related component, so we suggest including it as soon as possible.

Testing ag-Grid Applications with Jasmine

In our Javascript Seed Repo we provide working examples of how to test your project with Jasmine (under the javascript project).

In order to test your application you need to ensure that the Grid API is available - the best way to do this is to set a flag when the Grid's gridReady event fires, but this requires an application code change.

An alternative is to use a utility function that polls until the API has been set on the GridOptions:

function waitForGridApiToBeAvailable(gridOptions, success) { // recursive without a terminating condition, // but jasmines default test timeout will kill it (jasmine.DEFAULT_TIMEOUT_INTERVAL) if(gridOptions.api) { success() } else { setTimeout(function () { waitForGridApiToBeAvailable(gridOptions, success); }, 500); } }

Once the API is ready, we can then invoke Grid API and ColumnApi methods:

it('select all button selects all rows', () => { selectAllRows(); // selectAllRows is a global function created in the application code expect(gridOptionsUnderTest.api.getSelectedNodes().length).toEqual(3); });

Next Steps

Now you can go to reference to learn about accessing all the features of the grid.