Introduction
Hello readers! Today we are going to discuss a very powerful, fully featured, and very customizable grid library: ag-grid.
Ag grid is a very fast grid library that has a vast number of features available and is totally customizable according to your needs. The ag in ag-grid stands for agnostic framework which allows developers to take advantage of different frameworks. It supports multiple frameworks like angular, react, vue, and javascript as well. So first let us see what all features are available in the ag grid which makes it a very famous grid option. Let us start.
Why use the Ag-grid?
- It supports Angular, react, vue, and javascript.
- It is open source.
- The community edition is free.
- It supports some features which are not available in other libraries like pivoting, and grouping.
- Ag grid framework is a custom-made framework that means no dependency which also reduces your work if you switch your framework from angular to react or from vue to react.
Features of ag-grid
Here are some features of ag-grid which are difficult to find in other grid libraries.
Cell Editing
We can edit the cell data using the editable property of the column definition.
Column Filtering
Ag grid supports column filters which allows you to filter the rows using the value. Column filters can be applied on the basis of string, number, or date. It also supports Quick Filter that filters rows across all columns and words in the text: and an External filter that is independent of any filtering done.
Clipboard
It enables the user to copy and paste the items from the grid. For example, when you select 3 4rows and then press ctrc+c and paste in some editor, you will notice that the rows are pasted along with the column headers even though you didn’t copy the column headers. To use this feature we just need to enable the copyHeadersToClipboard option.
Export to Excel
This feature comes with the enterprise version of Ag grid where the user can download the data in CSV or Excel format. This feature can be used either from the context menu or programmatically from Grid API.
Tree data
This is another feature of the enterprise version of ag-grid where you can easily display tree data where you have parent-child relationship data. You just need to set the treedata option to true in the grid options and then you can supply your data accordingly.
Pivoting
This feature allows you to take column values and then them into other columns.
Tool Panel
This feature allows the user to manipulate the list of columns like show/ hide columns by selecting from the checkboxes or dragging the columns.
Conclusion
Today we got to know some very important features of ag-grid and why we should use it. You can easily make modifications in this library according to your requirements which makes it a very powerful library. You can learn more about ag-grid here.
Check out a working example of an ag-grid in angular here.
Finally, for more such posts like this, please follow our LinkedIn page- FrontEnd Competency.