JavaScript Getting Started With AG Grid in 5 Minutes

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css">
</head>
<body>
<h1>Hello from ag-grid!</h1>
<div id="myGrid" style="height: 500px; width:500px;" class="ag-theme-balham"></div>

<script type="text/javascript" charset="utf-8">

    const columnDefs = [
        {headerName: 'Make', field: 'make'},
        {headerName: 'Model', field: 'model'},
        {headerName: 'Price', field: 'price', editable: true}
    ];

    const gridOptions = {
        columnDefs: columnDefs,
        enableSorting: true,
        enableFilter: true,
        pagination: true
    };

    const eGridDiv = document.querySelector('#myGrid');

    new agGrid.Grid(eGridDiv, gridOptions);

    fetch('https://www.ag-grid.com/example-assets/row-data.json').then(function (response) {
        return response.json();
    }).then(function (data) {
        gridOptions.api.setRowData(data);
    })

</script>
</body>
</html>

# Getting Started with AG Grid JavaScript Demo

A 5 minute Getting Started Demo of AG Grid Free Community Edition.

Blog:

https://blog.ag-grid.com/get-started-with-javascript-grid-in-5-minutes/

Full Source:

https://github.com/ag-grid/javascript-data-grid