[2] Ag-Grid — default and custom sorting, filtering

If you are beginner and haven’t checked our previous article. Checkout
Introduction to ag-grid: https://medium.com/codalyze/getting-started-with-ag-grid-a-rich-performant-data-table-fb541debf5e9

Hello developers, As on the last article we have checked introduction of Ag-Grid in ReactJs, In this article, We are going to learn about sorting, filters and filterParams in Ag-Grid.

Filters for grid.

Ag-Grid [https://www.ag-grid.com/documentation/react/]

On Grid Ready

When the grid component mounts and gets ready it triggers a callback function with an object as argument which has api and columnApi. These two apis are used to apply various features provided by ag-grid. So, pass onGridReady prop with a function as value to store the two api in the local state.

Sorting:

Sorting is made available very easy in Ag-Grid. All you have to do is add a property sortable: true in column defination.

Default sorts:

If you are wishing to have to default sorting order, then addsortingOrder:['desc'] which will give you default descending sorting order. sortingOrder property takes array of ‘asc’ and ‘desc’ values.

Custom Sort:

Sometimes we get situations where sorting should be done according to our own needs. For example, we need to compare dates. So, we can write a custom sort function for comparing dates. Ag-Grid provides a comparator function in columnDefination which can be used for defining our own sorting method.

If you want to run a function after completion of sort, there is property called postSort. You have to pass this prop into the AgGridReact component.

Filiters:

You can filter the rows in the grid by using filter property in column definations. Types of filters are 1) agTextColumnFilter, 2)agNumberColumnFilter, 3) agSetColumnFilter, 4) agDateColumnFilter

If you want to apply any filters manually when the grid gets ready, you can use grid-api to apply the filters. First get the filter instance of any column by getFilterInstance method available in api. Next set the model for the instance by setModel with various options like type, filter etc. And at last dont’ forget to apply the filters by calling the onFilterChanged method.

There is also getFilterModel which will give filters from all the columns and setFilterModel which will set filters to all the columns.

FilterParams:

If you want to customize the filter rules according to your own wish, there is a filterParams property in column defination, where we have to provide the options in object like filterOptions, defaultOption, caseSensitive, textCustomComparator etc.

Hope this article helps you to understand sorting, filter and filterParams in ag-grid React.

Written by Harishponna
For any clarification please reach out: www.linkedin.com/in/harish-ponna-b9b885ba

Feel free to share your feedback at mail@codalyze.com