AgGrid: Quick Feature Overview

AgGrid is a high performance JavaScript data-grid library. This blog is consolidation of my learning's about this library.

Contents

• Why AgGrid?

• When AgGrid?

• How AgGrid?

🤔 Why?

What is so special about this library?

• ag-Grid is framework agnostic. It is implemented in Typescript with zero dependencies. It is possible to use ag-Grid without any JavaScript framework. It is possible to use no framework with ag-Grid i.e use the fully featured JavaScript only version.
• Ag-Grid also supports all major frameworks such as React, Angular and Vue
• Provides a lot of features(around 63 features) such as sort, multi-sort, filter, pinning, column hiding, Drag and drop, row grouping, row selection, cell editing, export, server side rendering, copy and paste, pagination and many more...
• The basic functionalities are present in the community/Free edition.
• Highly customizable (Customization's are available in community edition also)
• A Very good and well explained documentation with brief examples.
• Learning curve is gentle/low

🕘 When?

It is a high quality data grid library for achieving user interfaces which require the custom representation of data, editing of data within the table, achieving different operations on the data grid, pagination etc. This will save enormous efforts and time of the developers while building any grid structures. Apart from the features mentioned in this blog, there are additional useful features(ag-grid.com/javascript-grid-features) which this library offers. This example(ag-grid.com/example.php) can give a glimpse of the effectiveness of this library and what all can be achieved with it.

📍 Most Important tip would be to read the documentation.

📎 A behaviour or use case can be achieved in different ways using different features of ag-Grid. There is no standard process or method. However some ways would be easy and a few might add some complexity in the code.

💭 Main motivation behind this blog is - one should not end up adding a lot of efforts when it can be achieved very easily.

PS. I am not going to start with the installation of ag-Grid and how to use it in. Ag Grid documentation is the best place to look for getting started guide.(The examples used in this blog will pretty much cover this point, though) The main intent of this blog is to give an overview of this library.

PPS: The terminologies used in this blog are in the context of React framework.

🧰 How?

1. Almost every feature provided by ag-Grid is customizable 🛠️

AgGrid accepts custom components to replace any of it's default components. From how to display data, column headers, footer, status bar, selection component To filters, sort, cell editors, etc. everything can be changed according to the requirement.

Let's take a simple example for the cell component.

1. Click on header to add sorting on any column
2. Click on the title cell to edit the Todo title
3. Click on todo status column to edit the todo status.
4. To apply filter on todos based title click on hamburger in the header
5. To Resize columns click on divider between two columns to increase or decrease the width of the columns
6. drag columns to change their position

In Above example I have 2 columns Todo text and Todo status. Status value can be either true or false. Instead of rendering true or false text for status, I want to give some pictorial representation such as cross mark and check mark. I have written ShowTodoStatus component which renderes the icon based on the value of status. In column definitions I have given ShowTodoStatus as cellRendererFramework.

const columnData = [
    {
      headerName: "Title",
      field: "title",
      minWidth: 350
    },
    {
      headerName: "Completed",
      field: "completed",
      cellRendererFramework: ShowTodoStatus,
      cellEditorFramework: ChangeTodoStatus
    }
  ];

For editing, If you observe todo title field, we have not provided any cellEditorFramework. It is using AgGrid's default editor. But for todo status, there is a custom editor.

The editor has two buttons and the user can click on any of the button to change the status. This is very basic customization that I have shown here. You can achieve very complex user interfaces with this. How values can be accessed inside the component and what all values are accessible, is covered in further points.

From above example you might be clear on how to use this library. It requires the column definitions and row data to render the grid. Column definition can be in json format(as given in example) or in the recent versions they have introduced <AgGridColumn /> component which can be used to provide the column definitions as well.

2.Props And Data available for the Customization

The best part of customization is the props(options) exposed for customization, they are very consistent for all the apis. For example: If you want to provide a custom renderer for cell: the prop name is - cellRendererFramework And if you want to pass extra props to custom renderer the prop name is cellRendererParams.

Similarly for editors. there is cellEditorFramework and cellEditorParams. for status Bar- statusBar, statusBarParams etc.

In order to do customization's inside the component you need to have access to the basic grid data. In the below codepen example, I don't want to delete a post if it is book marked i.e I need to know whether the post is bookmarked or not inside the custom renderer. The complete row data is passed to custom components by grid.

The best part is the API's are designed in such a way that most of the grid data, props and functions are available for every component and event handlers.

Apart from ag-Grid passing grid props to the custom component, we can also pass explicit props using cellRendererParams, cellEditorParams etc to the respective components. Suppose we want to add post category column. The category options are dynamic and we are receiving them from some API. To access that inside cellEditor use cellEditorParams and pass the options as a prop to the CustomDropDownEditor. So, the column definition for Post Category would be:

 {
    headerName: "Post Category",
    field: "category",
    cellEditorFramework: CustomDropDownEditor,
    cellRendererParams:  {
      categoryOption: optionsPresentInApplication
    }
  },

3.Don't need to manage any data in state 🤹

Whenever a react developer builds any component which takes user input, there will be a state called value in that component 😉.

The main thing to keep in mind while using AgGrid is, you don't need to manage any component state to store the row data. (The above statement is for client side rendered applications to be precise.) Questions might come to your mind about how we are going to track the data changes, accessing the changed data or updating or deleting the grid data.

The Answer is - using AgGrid apis. In the above example user can add or delete posts. Also can bookmark a post or remove bookmarked post. The count displayed on top of table is getting updated after every add and delete action. I am using an onGridReady event to store the gridApi(I am using ref to store the gridApi, you can use state as well). For add I am calling applyTransaction on the gridApi. For deleting post I have access to grid api in my renderer, so I am using that to call applyTransaction with delete parameter. Same for bookmark, in BookMarkPost component applyTransaction is getting called with update parameter.

This is a really important point to keep in mind because keeping row data in component state and managing it with AgGrid state and operations can make things complex. This does not mean don't store any data in the state. There are some use cases where some part data needed to be stored as a component state.

4.Event handling

One of the best features of the library I would say.

ag-Grid have exposed a lot a of handy events. Overall event documentation you can find here. This will really help to achieve a wide range of use cases.

I have noted down few event and it's use cases which are as follows:

• onGridReady event is called only once when the grid is mounted and rendered. You can perform some initializations for grid here. In the second example I have stored the gridApi in this function.

• onModelUpdated event is called every time when there is change in grid structure i.e filter applied, sort applied, column added or removed.

  Some other examples are onFilterApplied, onRowSelectionChanged, onCellClicked, onCellEditingStarted, onCellEditingStopped etc.

5.Styling 💅🏽 and Icons

We have covered a lot about how to customize the grid functionally now let's look at how the styles can be customized.

AgGrid comes with 5 themes: ag-theme-alpine, ag-theme-alpine-dark, ag-theme-balham, ag-theme-balham-dark, ag-theme-material. You need to choose one base theme and customize over it. In my example I have used the ag-theme-alpine.

<div className="ag-theme-alpine">
   <AgGridReact
     rowData={rowData}
     columnDefs={columnData}
     ...
   />
</div>

There are few ways which can be used for customization which are given here ag-grid.com/javascript-grid-themes-customis.. . I won't go deep in explaining this but this is a complete guide how you can change the themes completely.

Apart from this there are some use cases where we want to provide different style to specific cells. For example, Strike through the todo text if it completed or indicate a cell with red color if the value is less than 100.

For this ag grid has given a few props like rowStyle, cellStyle, rowClass, cellClass, rowClassRules, cellClassRules, ag-row-hover and ag-column-hover etc.

rowClassRules={{
     "strike-through":  params => params.data.completed
 }}

ℹ️ Icons: It is possible to override ag-Grid default icons with custom icon set, [checkout this page] (ag-grid.com/javascript-grid-icons ).

6. Bundle Size 🧳

As AgGrid is bundled with lots of amazing features, the size of the library can impact total App bundle size.

With the newer versions of AgGrid, they are introducing module imports. i.e instead of importing the whole library only import the modules which you are using in your application. This will help reduce bundle size. For more information: ag-grid.com/javascript-grid-modules

ag-Grid is available in both community and enterprise edition. The examples presented in this blog are built using community edition. More such amazing and advanced features you will find in the enterprise version, which also comes up with technical support from ag-Grid team.

The code and tests for the examples are available at my github Repo.

I will be covering testing of the grid, the custom renderes and editors in the upcoming blog. Stay Tuned!

This is my first attempt of blog writing. Please do provide your valuable feedback!

Thank You 🙂