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>

Web Components are reusable user interface widgets that are created using open Web technology. They are part of the browser and so they do not depend on external libraries such as AngularJS 1.x or JQuery.

Web Components are of particular interest to ag-Grid as I see them as the future for reusable components. A true Web Component will be reusable in any framework. Angular's directives are based on Web Components.

Web components are an emerging technology and not available in all browsers. Some browsers lacking support can be plugged using polyfills. The examples on this page use webcomponent.js polyfill from Google. The examples on this page have been tested to work with latest versions of Chrome and Firefox on Windows. They failed using IE 11 and Safari on Windows. I have not done extensive testing on which browsers Web Components as what browsers support Web Components and which don't is not a grid problem / discussion, it's specific to Web Components. If you are going to use Web Components in your application, then which browsers your application will run on is a big question you need to answer for yourself.

Using ag-Grid Web Component

When using Web Components, you have the choice of using the bundled version of ag-Grid or the CommonJS version.

When the ag-Grid script loads, it does not register the Web Component. This is because the Web Component is an optional part of ag-Grid and you need to tell ag-Grid you want to use it.

// get ag-Grid to install the web component
agGrid.initialiseAgGridWithWebComponents();

ag-Grid registers as a tag named 'ag-grid'. To insert a grid into your application, use the ag-grid tag and then either provide the grid options through Javascript or provide options through html attributes.

HTML Code:

<ag-grid id="myGrid"></ag-grid>
Javascript Code:
var myGrid = document.querySelector('#myGrid');
myGrid.setGridOptions(gridOptions);

Basic Web Components Example

The example below shows a simple grid using Web Components.

Advanced Web Components Example

Destroy

To get the grid to release resources, call api.destroy(). If you do not do this, old grids will hang around and add to a memory leak problem in your application.