JavaScript Data GridQuick Start

Create a grid in 60 Seconds

At a minimum, three things are required to create a grid:

Container: for the grids placement in your application.
Styles: to define the grid's theme & dimensions.
Row Data & Column Definitions: to define the data and how it should be displayed.

Providing a Container

First, load the AG Grid library and create a blank container element which will be used to contain the grid:

<html lang="en">
  <head>
    <!-- Includes all JS & CSS for AG Grid -->
    <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
  </head>
  <body>
    <!-- Your grid container -->
    <div id="myGrid"></div>
  </body>
</html>

Instantiating the Grid

Then, create the grid inside of your container by calling createGrid on the agGrid package.

// Grid Options: Contains all of the grid configurations
const gridOptions = {};

// Your Javascript code to create the grid
const myGridElement = document.querySelector('#myGrid');
agGrid.createGrid(myGridElement, gridOptions);

In this snippet, the grid is created using the agGrid.createGrid() method. This method takes two parameters:

Container: The DOM element that the grid will be placed into.
Grid Options: An object containing all of the grid's configuration options.

Row Data & Column Definitions

Next, provide the grid with some data to display and some column definitions to define how to display it.

In the gridOptions object, add the following properties:

// Grid Options: Contains all of the grid configurations
const gridOptions = {
  // Row Data: The data to be displayed.
  rowData: [
    { mission: "Voyager", company: "NASA", location: "Cape Canaveral", date: "1977-09-05", rocket: "Titan-Centaur ", price: 86580000, successful: true },
    { mission: "Apollo 13", company: "NASA", location: "Kennedy Space Center", date: "1970-04-11", rocket: "Saturn V", price: 3750000, successful: false },
    { mission: "Falcon 9", company: "SpaceX", location: "Cape Canaveral", date: "2015-12-22", rocket: "Falcon 9", price: 9750000, successful: true }
  ],
  // Column Definitions: Defines & controls grid columns.
  columnDefs: [
    { field: "mission" },
    { field: "company" },
    { field: "location" },
    { field: "date" },
    { field: "price" },
    { field: "successful" },
    { field: "rocket" }
  ]
};

This is a basic example of Row Data & Column Definitions. The column definitions will access data via the provided field property, which maps directly to fields inside of the rowData objects.

Styling the Grid

Finally, add the ag-theme-quartz CSS class to your grid container element to apply the grid's theme. You should also set the grid's dimensions using CSS.

<!-- Your grid container -->
<div id="myGrid" class="ag-theme-quartz" style="height: 500px"></div>

Other included themes can be found on the Themes page.

Result

When you run your application, you should see a basic grid with three rows. To see the full code, click the </> Code button below the example.

To live-edit the code, open the example in CodeSandbox or Plunkr using the buttons to the lower-right.

Next Steps

Read our Introductory Tutorial.
Watch our Video Tutorials.