Search code examples
ag-gridag-grid-angular

How to Ignore selected rows when filtering using floating filters in ag-grid?


I'm currently working on a project that uses ag-grid in Angular. We have a table that displays some sort of data and it's possible to filter this table using some textbox floating filters above the table for every column. Every row has a checkmark in the beginning that can be used to select this row.

The goal is to figure out a way to not filter out the rows that have been selected by the user. The rest of the rows should get filtered as normal.

Is there an easy way to implement this?

I've been looking trough the documentation and it seems like I will have to write a custom filter component, but I'm not sure where to start. Do filters even have the capability to check if a row is selected or not?


Solution

  • So I figured out an easy way. I created a new simple class:

    export class IgnoreSelectionFilter extends TextFilter {
        doesFilterPass(params: IDoesFilterPassParams): boolean {
            if (params.node.isSelected()) return true;
            else return super.doesFilterPass(params);
        }
    }
    

    I use this class as the "filter" component for every column where this functionality is required. This new class behaves exactly like agTextColumnFilter, but first it will verify if the node is selected or not and ignore it if it's selected.