Angular5: Hide ag-gird rows based on condition

Question

I have the below response from the service, when ever the flag is true I have to hide the whole row (total 20 columns I have) else show it. How can I achieve this in ag-grid?

data = {
    name: "A",
    flag: true
   },
   {
    name: "B",
    flag: false
   },
   {
    name: "C",
    flag: false
   }

I did try the useExternalFilter like below and then I got stuck as to how to use this useExternalFilter further. Can any one please guide me through.

this.filterOptions = {
  useExternalFilter: true
};

this.gridOptions = {
  filterOptions:  this.filterOptions
 };

Answer 1

what you want is this:

this.gridOptions = {
  // is always present, so return true
  isExternalFilterPresent: function() { 
    return true; 
  },

  // return true if flag=true
  doesExternalFilterPass: function(rowNode) { 
    return rowNode.data.flag; 
  }
};

see ag-Grid Docs for more details

Answer 2

Simplest way to do this is, filter your data first based on the flag value

const filteredData = this.data.filter(item => !item.flag);

Then set this filteredData as grid data

this.gridOptions.setRowData(this.filteredData);

Hope this will do the needful