Hello readers! Today we are going to discuss a very powerful, fully featured, and very customizable grid library: ag-grid.
Why use the Ag-grid?
- 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.
We can edit the cell data using the editable property of the column definition.
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.
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.
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.
This feature allows you to take column values and then them into other columns.
This feature allows the user to manipulate the list of columns like show/ hide columns by selecting from the checkboxes or dragging the columns.
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.