Introduction

In this episode we are going to see how to create a basic AG Grid and make it work.

AG Grid comes with following flavors

Javascript – Plain vanilla JS version
React
Angular
Vue

AG Grid has two different version

AG Gride Community – It is free and open source.
Ag Gride Enterprise – It is commercial and need to buy license.

We can use the “AG Gride Community” in production environment too. It is having less features and no technical support comparing to Enterprise version.

What are we going to use in this episode?

We are going to use “AG Grid Community” version, “Javascript” flavor and static row data.

Steps to create AG Gride

Importing AG Gride Library
Creating a placeholder HTML element
Creating object of AG Grid

Importing AG Gride Library

There are two option to import AG Gride Library (using CDN).

Importing AG Gride JS which includes all AG Gride JS and CSS files

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

JS file ag-grid-community.min.js will include AG Gride JS library, Core CSS, Theme CSS files

Importing AG Gride JS file, Core CSS file and theme CSS

<!-- AG Gride core JS library -->
<script src="<https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.noStyle.js>"></script>

<!-- AG Gride core CSS files -->
<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css>"/>

<!-- AG Gride theme CSS files -->
<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.css>"/>

Creating a Placeholder HTML Element

Create a block level element with following attributes

id – to select this element to load AG Grid
style height and width – which will be used to decide the height and width of AG Gride
class for theme name – class name to apply theme

<div
      id="my-ag-grid"
      style="height: 300px; width: 850px"
      class="ag-theme-alpine"
></div>

Creating object of AG Grid

We need to create object of AG Grid and it takes two arguments

Fist parameter is the Element object which point to the placeholder HTML element which we created
Second parameter is the Grid option object which will have huge list of properties necessary to render grid.

//Parameter #1 - creating Element object of placeholder HTML element
const gridDiv = document.querySelector('#my-ag-grid');

//Parameter #2 - creating Grid option with two properties "columnDefs" and "rowData"
const gridOptions = {
  columnDefs: [
    { field: 'firstName' },
    { field: 'lastName' },
    { field: 'age' },
    { field: 'country' },
  ],
  rowData: [
    { firstName: 'Abu', lastName: 'Thakir', age: 10, country: 'USA' },
    { firstName: 'Abu', lastName: 'Thakir', age: 10, country: 'USA' },
    { firstName: 'Abu', lastName: 'Thakir', age: 10, country: 'USA' },
    { firstName: 'Abu', lastName: 'Thakir', age: 10, country: 'USA' },
    { firstName: 'Abu', lastName: 'Thakir', age: 10, country: 'USA' },
  ],
};

//Creating AG Gride object
new agGrid.Grid(gridDiv, gridOptions);

Complete Example

Filename: index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Ag Grid 1</title>
    <script src="<https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js>"></script>
  </head>
  <body>
    <h1>AG Grid 1</h1>
    <div
      id="my-ag-grid"
      style="height: 300px; width: 850px"
      class="ag-theme-alpine"
    ></div>
  </body>
</html>

Filename: index.js

//Parameter #1 - creating Element object of placeholder HTML element
const gridDiv = document.querySelector('#my-ag-grid');

//Parameter #2 - creating Grid option with two properties "columnDefs" and "rowData"
const gridOptions = {
  columnDefs: [
    { field: 'firstName' },
    { field: 'lastName' },
    { field: 'age' },
    { field: 'country' },
  ],
  rowData: [
    { firstName: 'Abu', lastName: 'Thakir', age: 10, country: 'USA' },
    { firstName: 'Abu', lastName: 'Thakir', age: 10, country: 'USA' },
    { firstName: 'Abu', lastName: 'Thakir', age: 10, country: 'USA' },
    { firstName: 'Abu', lastName: 'Thakir', age: 10, country: 'USA' },
    { firstName: 'Abu', lastName: 'Thakir', age: 10, country: 'USA' },
  ],
};

//Creating AG Gride object
new agGrid.Grid(gridDiv, gridOptions);

Thanks for reading 🙂

S1:E1 – Hello, World of AG Grid