https://github.com/changhuixu/retaining-filters-in-ag-grid

retain filters in ag-Grid when navigating among pages
https://github.com/changhuixu/retaining-filters-in-ag-grid

ag-grid angular angular8 data-grid filter grid navigation property-bag

Last synced: about 2 months ago
JSON representation

retain filters in ag-Grid when navigating among pages

• Host: GitHub
• URL: https://github.com/changhuixu/retaining-filters-in-ag-grid
• Owner: changhuixu
• License: mit
• Created: 2019-09-28T03:15:20.000Z (about 6 years ago)
• Default Branch: main
• Last Pushed: 2023-12-05T18:41:15.000Z (almost 2 years ago)
• Last Synced: 2023-12-05T19:38:41.812Z (almost 2 years ago)
• Topics: ag-grid, angular, angular8, data-grid, filter, grid, navigation, property-bag
• Language: TypeScript
• Homepage: https://changhuixu.github.io/retaining-filters-in-ag-grid/
• Size: 7.29 MB
• Stars: 12
• Watchers: 3
• Forks: 4
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
# Retaining Filters in ag-Grid

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/I3I63W4OK)

## [Demo](https://changhuixu.github.io/retaining-filters-in-ag-grid/)

## [Medium Blog Post](https://medium.com/javascript-in-plain-english/retaining-ag-grid-filters-using-query-parameters-55167be07a20)

The ag-Grid library provides the best grid functionalities in the world. One of its useful features is column filtering.

A common user story is like the following. A user filters the data grid and chooses one row to view the details page. When the user wants to navigate back to the grid page, the filters are gone. The user has to filter the data grid again to obtain previous filtered data rows. How to retain the previous filters?

The ag-Grid has several built-in filters, including TextFilter, NumberFilter, and DateFilter. We can also use combined column filters to filter results. A combined filter is consist of two filters joined by a boolean operation (AND, OR) between them.

In this blog post, we will implement an easy way to retain ag-Grid filters using route query parameters in Angular.

## By default, filters will be lost when navigating to another page

![filter lost](./filter-lost.gif)

## Filters are retained using route query parameters

![filter retained](./filter-retained.gif)

## License

Feel free to use the code in this repository as it is under MIT license.

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/I3I63W4OK)