Revision history [back]

To integrate ag-grid external filter with filters of columns, you can follow the below steps:

1. Define an external filter using gridOptions in your component:

this.gridOptions = {
  // other grid options
  externalFilter: true,
  isExternalFilterPresent: () => {
    // return true if the external filter is active
    return this.externalFilter;
  },
  doesExternalFilterPass: (node) => {
    // implement your filtering logic here, based on the external filter and column filters
  }
};

1. Implement your filtering logic inside the doesExternalFilterPass method. You can access the external filter value using a variable (this.externalFilter in the above example), and the column filters using the node.data object.

2. Bind the external filter value to an input field or any other form element using ngModel or any other state management tool you prefer.

3. In the onFilterChanged event of the grid, update the externalFilter variable based on the input value:

onFilterChanged() {
  this.externalFilter = this.filterInput;
  this.gridApi.onFilterChanged();
}

1. Call the onFilterChanged method of the grid API whenever the external filter value changes.

By implementing these steps, you can integrate ag-grid external filter with filters of columns.