Getting started with Ag-Grid [a rich performant data-table]
Ag-Grid [https://www.ag-grid.com/documentation/react/getting-started/]
Ag-Grid is a fully-featured and highly customizable JavaScript data grid. In simple words it’s a data maintaining grid where we can use it to show small to large amount of data in the form of table in customized way and do wide variety of operations on the data like filtering, sorting, exporting data as excel or pdf etc. The main advantage of ag-grid is that supports all the popular JS libraries and frameworks such as ReactJs, AngularJs, VueJs, Vanilla JavaScript. Ag-Grid maintains its own state and we can use its api to do wide variety of operations in manipulating the data.
In this article, I am going to give a quick Ag-grid setup guide in ReactJs.
Background: I am working on the ag-grid library in NextJs for quite a few months and I learned a lot of features through the ag-grid documentation and implemented it in the projects. Ag-Grid library is so awesome that we can handle lot of data and can perform a lot of operations in simple steps provided by the api. There are not many articles or videos available on ag-grid in React. So, I decided to write articles on this library and help developers to understand it in simple lines of code.
There are two versions of ag-grid, they are ag-grid-community and ag-grid-enterprise. Enterprise version has more features when compared to community version and you have to pay for using this version. Where as ag-grid-community is a free version. We will be using ag-grid-community in this article.
- First to use ag-grid in project we need to install ag-grid-community npm library.
2. As we are using ReactJs, we have to install another npm package ag-grid-react as a wrapper around ag-grid-community to utilize its features in ReactJs.
3. After installing the two packages, import the ag-grid-communtiy and ag-grid.css to App.js file as shown below, so that it can be utilised by the ag-grid-react wrapper.
Now we can start using the ag-grid-react components in building data-tables.
4. In this project we are going to use some static data to pass and view in the grid.
5. import AgGridReact component from ag-grid-react and pass the props of rowData, columnDefs.
6. rowData is nothing but the initial data that we want to pass into the grid.
7. columnDefs are known as column definitions. We have to define each and every column of the grid like the width of column, headerName of column, field of column.
8. field values in columnDefs should be same as property name of objects in rowData. headername can be anything to represent the column of the table.
9. Now pass rowData and columnDefs into the AgGridComponent that we imported from ag-grid-react.
10. Last but not least don’t forget to wrap a div with className of theme, height and width around AgGridReact component :)
Hope this article helps you to understand to get started with ag-grid in React. More articles coming soon.
Next blog will be on handling filters in Ag-grid and use cases. Stay tuned.
Written by: https://medium.com/@harishponna55
