Framework:Javascript Grid

JavaScript Grid: Using AG Grid with AMD

We walk through the main steps required when using AG Grid with AMD.

Initialise Project

mkdir ag-grid-amd
cd ag-grid-amd
npm init --yes

Install Dependencies

npm i --save ag-grid-community

# or, if using Enterprise features
npm i --save ag-grid-enterprise

Create Application

Our application will be a very simple one:

    baseUrl: '../node_modules',
    paths: {
        'agGrid': 'ag-grid-community/dist/ag-grid-community.amd.min', // for community features
        // 'agGrid': 'ag-grid-enterprise/dist/ag-grid-enterprise.amd.min',   // for enterprise features

requirejs(['agGrid'], function (agGrid) {
    var columnDefs = [
        { field: "make" },
        { field: "model" },
        { 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

    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);
<!DOCTYPE html>
    <script data-main="app" src=""></script>
    <div id="myGrid" style="height: 200px;width: 600px" class="ag-theme-alpine"></div>

Now we can either serve the HTML file above which will result in the following grid.


Example Code

The code for this example can be found on GitHub.