Expand All

  Getting Started

  Interfacing

  Features

  Row Models

  Themes

  Components

  Examples

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>

Here we've referenced the ag-Grid dependency in the head section, and specified a div with an ID of myGrid.

We've also specified the Fresh Theme - themes are we we can define the look and feel of the Grid. More on that later.

example1.js would be where your application code would live in this example.

Creating the Grid

Now that we have a div for the Grid, we need to specify the following at a minimum:

  • Columns
  • Row Data

So let's create a simply example with 3 columns and 3 rows of data:

// specify the columns
var columnDefs = [
    {headerName: "Make", field: "make"},
    {headerName: "Model", field: "model"},
    {headerName: "Price", field: "price"}
];

// specify the data
var rowData = [
    {make: "Toyota", model: "Celica", price: 35000},
    {make: "Ford", model: "Mondeo", price: 32000},
    {make: "Porsche", model: "Boxter", price: 72000}
];

// let the grid know which columns and what data to use
var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData
};

// wait for the document to be loaded, otherwise ag-Grid will not find the div in the document.
document.addEventListener("DOMContentLoaded", function() {

    // lookup the container we want the Grid to use
    var eGridDiv = document.querySelector('#myGrid');

    // create the grid passing in the div to use together with the columns & data we want to use
    new agGrid.Grid(eGridDiv, gridOptions);
});

With that in place we have a quick and simple Grid up and running:

A Richer Example

The below example is a more complex example demonstration much more interactivity and customisation. The mechanism for setting up the grid is the same as before. Don't worry about the finer details for now, how all the different options are configured is explained in the relevant parts of the documentation.