Implementing the JavaScript Datagrid

When using no framework, you have the choice of using the bundled ag-Grid (which puts the ag-Grid library into the global scope of the browser) or using a package manager to access the CommonJS version of the grid.

Pull in the ag-Grid Dependencies

You'll need to ensure you refer to the ag-grid library correctly - this can be done in a number of ways, but but you'll need to ensure you refer to either the ag-grid or the ag-grid-enterprise dependency, depending on which feature set you're using (i.e. if you're using any Enterprise features you'll need ag-grid-enterprise)

As an example we'll use NPM to manage our dependencies, and then refer to the dependencies in our HTML file:

Using ag-Grid
// package.json
"dependencies": {
    "ag-grid": "8.0.x",
}

// index.html
<html>
<head>
    <script src="node_modules/ag-grid/dist/ag-grid.js"></script>
    <script src="<your script>.js"></script>
</head>
Using ag-Grid-Enterprise
// package.json
"dependencies": {
    "ag-grid-enterprise": "8.0.x",
}

// index.html
<html>
<head>
    <script src="node_modules/ag-grid-enterprise/dist/ag-grid-enterprise.js"></script>
    <script src="<your script>.js"></script>
</head>

In either of the above examples we're using the full JS dependency which includes styles & themes - you can optionally chose to use the version without styles included (.noStyle.js). If you do this, you'll need to refer to the styles & themes separately, as below:

// index.html
<html>
<head>
    <script src="node_modules/ag-grid/dist/ag-grid.js"></script>
    <link href="node_modules/ag-grid/dist/styles/ag-grid.css" rel="stylesheet" />
    <link href="node_modules/ag-grid/dist/styles/theme-fresh.css" rel="stylesheet" />
    <script src="<your script>.js"></script>
</head>

Using Bundled ag-Grid and Pure Javascript

Reference the ag-Grid script from your web page and then access the library through global scope as follows:

// example creating a grid using raw Javascript
var eGridDiv = document.querySelector('#myGrid'); // get a reference to the grid div
new agGrid.Grid(eGridDiv, gridOptions); //create a new grid

Below is a simple example using standard Javascript.

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.

Using CommonJS and Pure Javascript

For an example of using the CommonJS and raw JavaScript version of ag-Grid, see the example CommonJS, Gulp and Browersify on Github.

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.

Next Steps...

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