Get started with JavaScript Grid in 5 minutes

August 15, 2018 0 Comments

Get started with JavaScript Grid in 5 minutes

 

 

Datagrid is something you’ve probably encountered multiple times in user interfaces. It’s a component that displays data in the form of a table. Each item in the data is displayed as a row divided into columns for the item’s fields. Grids have been around for a long time, mostly on Desktops, but are no less common now in the web app UIs.

Today most companies and software engineers choose existing solutions, because of the complexity and high costs associated with custom implementations. It’s no wonder that a great deal of 3rd party JS data grids are available as free or paid versions. Choosing which one to use is often a challenge in itself. How do you do that?

After developers make sure that a grid meets the requirements for features and performance, than they look at how easy it will be to integrate and configure it. Also, if the widget comes with elaborate documentation that breaks down all features and gives examples than developers are inclined to use it in their applications.

ag-Grid is where you’ll find that all.

It is a fully-featured and highly customizable JavaScript data grid. It delivers outstanding performance, has no 3rd party dependencies and integrates smoothly with all major JavaScript frameworks. We’ve also worked hard on the documentation to make sure we’ve got every feature and customization option explained with examples.

This article features a JavaScript grid example and demonstrates you how easy it is to integrate and configure the ag-Grid. It’s a getting started guide designed to be completed in less than 5 minutes by copy/pasting. Once we’re done with the basic setup, we’ll take a look at a few features and configuration options that control them. Here’s a preview of what the demo will look like:

So let’s start!

During the last couple of years, we are witnessing a Cambrian Explosion of JavaScript project setup configurations. It seems like everyday someone comes up with a new, better way for JavaScript developers to build and distribute their apps. However, for the purposes of this setup, we are going to stick to simplest no-build, single HTML file setup which loads the ag-Grid scripts from CDN.

You can download the sample that we’ll be building in this article from github repository.

Let’s start from this basic html file:

We are going to load the necessary scripts and styles from the unpkg CDN. Add the following to the headelement:

The lines above import the agGrid component, the ag-grid.css stylesheet that defines the structure of the grid, and one of the available grid themes ag-theme-balham.css.

Our JavaScript grid should always rendered in a wrapping HTML element. This element acts as a container that defines the grid dimensions and specifies the grid's theme. So let’s add the wrapping DIV element to the HTML markup.

As you can see it restricts the height and width of the grid and defines the class ag-theme-balham that matches the name of CSS file we imported earlier.

To instantiate the grid, you need to define two required configuration properties — the column definitions that determines the grid structure and the data. So let’s add these properties to the script tag:

In our case, the column definitions contain three columns; each column entry specifies the header label and the data field to be displayed in the body of the table. The actual data is defined in the rowData as an array of objects. Notice that the fields of the objects match the field values in the columnDefs configuration object.

We’re now ready to instantiate the grid:

So here is a complete index.html for you to copy and paste into your local project:

If you now run the example you should see the data shown:

And that’s it! You’ve just integrated our grid component into your application. Let’s now see how easy it is to configure features in the grid.

In the real world, most of the time, we are dealing with data that resides on a remote server. So we need to request the data and feed it to the grid. Implementing this is quite easy.

To update data dynamically in the grid we need to use its API. When you create an instance of the grid, you define the options as the object and pass it as a parameter:

const gridOptions = { ... };
new agGrid.Grid(eGridDiv, gridOptions);

agGrid then mutates the options object and adds the api property that exposes a plethora of methods that allow us to implement complex scenarios with the grid.

To update data dynamically, we need to call the setRowData method.

gridOptions.api.setRowData(data);

So here’s an alternative setup:

Here, we replaced the rowData assignment with a data fetched from a remote service.

Sorting, Filtering and Pagination are among the most commonly used features of the modern grids. Our application doesn’t have too many rows, so finding data is fairly easy. But it’s not difficult to imagine how a real-world application may have hundreds (or even hundreds of thousands!) of rows, with many columns. In a data set of that size these features help you zoom in on a particular set of records.

Our JavaScript datagrid also provides rich inline editing experience so your users can update any record in a dataset with just a few clicks. Let’s see how we can enable these features.

Enabling sorting in ag-Grid is actually quite simple — all you need to do is set enableSorting to true in the gridOptions:

const gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
enableSorting: true
};

Once the property is added, you should be able to sort the grid by clicking on the column headers. Each clicks toggles through ascending, descending and no-sort states.

As with sorting, enabling filtering is as easy as setting the enableFilter property to true:

const gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
enableFilter: true
};

With this property set, the grid will display a small column menu icon when you hover over the header. Pressing it will show a popup with the UI for filtering which lets you choose the kind of filter and the text that you want to filter by.

ag-Grid allows easy customization of the default filtering UI and logic to implement your custom use case.

To enable pagination in our JavaScript datagrid, all you need to do is set the pagination property to true in the gridOptions:

const gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
pagination: true
};

After adding the property, you should be able to move through the pages by using the controls at the bottom of the grid:

By default the grid uses a page size of 100 records, but it can easily be changed through configuration options.

To make the grid editable simply set the editable property to true for a particular column definition in the configuration. All records in this column will become editable. For example, to enable inline editing of a car’s price, we need to make the following changes:

const columnDefs = [
{headerName: 'Make', field: 'make'},
{headerName: 'Model', field: 'model'},
{headerName: 'Price', field: 'price', editable: true}
];

And we are now able to edit the price:

ag-Grid comes with a bunch of built-in cell editors but if required you can easily create your own to suit your business needs.

My hope is that this “getting started” guide clearly showed you how easy it is to integrate and configure our JavaScript datagrid.

Now take the next step and start using ag-Grid in your project!

You’ll see it for yourself how fast and extensible the grid is and what makes it the best JavaScript grid in the world.

Join the millions of developers and thousands of companies who use ag-Grid to provide the best possible experience to their users.


Tag cloud