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: [
    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
    { make: "Ford", model: "F-Series", price: 33850, electric: false },
    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
  ],
  // Column Definitions: Defines & controls grid columns.
  columnDefs: [
    { field: "make" },
    { field: "model" },
    { field: "price" },
    { field: "electric" }
  ]
};

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.