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 🙂