Results:
Loading...
Javascript Data GridJavascriptReact Data GridReactAngular Data GridAngularVue Data GridVue

JavaScript Data GridGet Started with AG Grid

Quick Look Code Example

const columnDefs = [
  { field: "make" },
  { field: "model" },
  { field: "price" }
];

// specify the data
const 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
const gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData
};

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', () => {
  const gridDiv = document.querySelector('#myGrid');
  new agGrid.Grid(gridDiv, gridOptions);
});

Getting Started with Community Video

Getting Started with Enterprise Video

Getting Started with AG Grid Community

Below we provide code for a simple AG Grid application. To get this working locally, create a new application with one index.html page and have it served from a local web server. If you are not able to set up a web server, then you can start with a new JS project from Plunker.

Copy in Application Code

Copy the content below into the file index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Ag Grid App</title>
    <!-- Include the JS for AG Grid -->
    <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
    <!-- Include the core CSS, this is needed by the grid -->
    <link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css"/>
    <!-- Include the theme CSS, only need to import the theme you are going to use -->
    <link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.css"/>
  </head>
  <body>
    <!-- Button to demonstrate calling the grid's API. -->
    <button onclick="deselect()">Deselect Rows</button>
    <!-- The div that will host the grid. ag-theme-alpine is the theme. -->
    <!-- The gid will be the size that this element is given. -->
    <div id="myGrid" class="ag-theme-alpine" style="height: 500px"></div>
    <script type="text/javascript">
        // Function to demonstrate calling grid's API
        function deselect(){
            gridOptions.api.deselectAll()
        }

        // Grid Options are properties passed to the grid
        const gridOptions = {

          // each entry here represents one column
          columnDefs: [
            { field: "make" },
            { field: "model" },
            { field: "price" },
          ],

          // default col def properties get applied to all columns
          defaultColDef: {sortable: true, filter: true},

          rowSelection: 'multiple', // allow rows to be selected
          animateRows: true, // have rows animate to new positions when sorted

          // example event handler
          onCellClicked: params => {
            console.log('cell was clicked', params)
          }
        };

        // get div to host the grid
        const eGridDiv = document.getElementById("myGrid");
        // new grid instance, passing in the hosting DIV and Grid Options
        new agGrid.Grid(eGridDiv, gridOptions);

        // Fetch data from server
        fetch("https://www.ag-grid.com/example-assets/row-data.json")
        .then(response => response.json())
        .then(data => {
          // load fetched data into grid
          gridOptions.api.setRowData(data);
        });
    </script>
  </body>
</html>

If everything is correct, you should see a simple grid that looks like this:this:

AG Grid in its simplest form

We will now break this file down and explain the different parts...

Importing JS & CSS, Setting Theme & Style

You can import all JS and CSS with ag-grid-community.min.js, or you can be selective and import just the JS ag-grid-community.min.noStyle.js and selectively include the CSS, so you don't download themes you don't want to use.

<!-- Include the JS for AG Grid -->
    <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
    <!-- Include the core CSS, this is needed by the grid -->
    <link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css"/>
    <!-- Include the theme CSS, only need to import the theme you are going to use -->
    <link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.css"/>

OR

<!-- Include the JS and CSS (all themes) for AG Grid. Larger download than needed -->
    <!-- as will includes themes you don't use -->
    <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>

You can select from any of the Grid Provided Themes. If you don't like the provided themes you can Customise the Provided Theme or do not use a Theme and style the grid yourself from scratch.

The dimension of the Grid is also set on the parent DIV via style="height: 500px".

<div id="myGrid" class="ag-theme-alpine" style="height: 500px"></div>

Grid Options

Options are provided to the grid using a Grid Options object.

// Grid Options are properties passed to the grid
 const gridOptions = {

   // each entry here represents one column
   columnDefs: [
     { field: "make" },
     { field: "model" },
     { field: "price" },
   ],

   // default col def properties get applied to all columns
   defaultColDef: {sortable: true, filter: true},

   rowSelection: 'multiple', // allow rows to be selected
   animateRows: true, // have rows animate to new positions when sorted

   // example event handler
   onCellClicked: params => {
     console.log('cell was clicked', params)
   }
 };

Creating New Grid Instance

The grid instance is created using new agGrid.Grid() passing in the DOM element to host the grid and the Grid Options.

// get div to host the grid
 const eGridDiv = document.getElementById("myGrid");
 // new grid instance, passing in the hosting DIV and Grid Options
 new agGrid.Grid(eGridDiv, gridOptions);

Setting Row Data

Data is loaded from the server and set using the grid API setRowData().

// Fetch data from server
 fetch("https://www.ag-grid.com/example-assets/row-data.json")
   .then(response => response.json())
   .then(data => {
      // load fetched data into grid
      gridOptions.api.setRowData(data);
   });

Accessing Grid's API

Once created, the grid places an API object on the Grid Options. This can then be accessed to use the grid's API.

// Function to demonstrate calling grid's API
 function deselect(){
     gridOptions.api.deselectAll()
 }

Consuming Grid Events

Listen to Grid Events by adding a callback to the appropriate on[eventName] onto the Grid Options. This example demonstrates consuming the cellClicked event.

const gridOptions = {
   onCellClicked: params => { // example event handler
     console.log('cell was clicked', params)
   }
   ....

Getting Started with AG Grid Enterprise

We would love for you to try out AG Grid Enterprise. There is no cost to trial. You only need to get in touch if you want to start using AG Grid Enterprise in a project intended for production.

To use AG Grid Enterprise instead of AG Grid Community, use the imports ag-grid-enterprise.min.noStyle.js and ag-grid-enterprise.min.js instead of ag-grid-community.min.noStyle.js and ag-grid-community.min.js.

For example if you were using ag-grid-community.min.js then make the follow change to enable all the Enterprise features.

- <script src="https://cdn.jsdelivr.net/npm/ag-grid-community@30.1.0/dist/ag-grid-community.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/ag-grid-enterprise@30.1.0/dist/ag-grid-enterprise.min.js"></script>

And that is all, you create the grid the same way, except this time it comes installed with all the Enterprise features.

For example, you can now Row Group (an Enterprise Feature) by a particular Column by setting rowGroup=true on the Column Definition.

const gridOptions = {
   columnDefs: [
     { field: "make", rowGroup: true },
     { field: "model" },
     { field: "price" },
   ],
   ...