JavaScript Data GridUsing 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:

requirejs.config({
    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: "Boxster", 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>
<html>
<head>
    <script data-main="app" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
</head>
<body>
    <div id="myGrid" style="height: 200px;width: 600px" class="ag-theme-alpine"></div>
</body>
</html>

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

Example Code

The code for this example can be found on GitHub.