Getting Started

Referencing the ag-Grid Files

In your html include ag-Grid's files as follows:

<!-- This is the javascript code for ag-Grid -->
<script src="pathToGrid/ag-grid.js"></script>
<!-- This is the core css required for ag-Grid, manages the layout -->
<link rel="stylesheet" type="text/css" href="pathToGrid/ag-grid.css">

<!-- This is the styling (not core) part of the css, include the theme you want, or create your own theme instead -->
<link rel="stylesheet" type="text/css" href="pathToGrid/theme-fresh.css">
<link rel="stylesheet" type="text/css" href="pathToGrid/theme-dark.css">
<link rel="stylesheet" type="text/css" href="pathToGrid/theme-blue.css">

There are minified versions of the .js and .css files if you want to use them instead.

ag-Grid has no dependencies, but will use supported frameworks if it finds them loaded.

Examples in AngularJS 1.x

Most of the examples in this documentation are given in AngularJS 1.x. This does not mean AngularJS 1.x is the only framework that can be used. As there is only one developer creating this project, time does not allow to give each example in each possible framework.

AngularJS was chosen as it's where the project has it roots. The only item that is not supported outside of AngularJS is AngularJS compiling (which doesn't make sense in other frameworks anyway).

Loading in Examples

In all the examples in this online documentation, the resources are loaded with an additional parameter "ignore=notused". 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.css?ignore=notused10">

But all you need is this:

<link rel="stylesheet" type="text/css" href="../dist/ag-grid.css">