JavaScript Data GridUsing AG Grid with AMD
javascript logo

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: "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');
    var api = agGrid.createGrid(gridDiv, gridOptions);
<!DOCTYPE html>
    <script data-main="app" src=""></script>
    <div id="myGrid" style="height: 200px;width: 600px" class="ag-theme-quartz"></div>

Now we can serve the HTML file above which will result the grid being displayed.

Example Code

The code for this example can be found on GitHub.