Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

Vue Data Grid: External Filter

External filtering allows you to mix your own filtering logic with the grid's inbuilt filtering, without creating column-based filter components.

This form of filtering is only compatible with the client-side row model.

Implementing External Filtering

The example below shows external filters in action. There are two methods on gridOptions you need to implement: isExternalFilterPresent and doesExternalFilterPass.

isExternalFilterPresent
Function
Grid calls this method to know if an external filter is present.
isExternalFilterPresent = (
    params: IsExternalFilterPresentParams
) => boolean;

interface IsExternalFilterPresentParams {
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
doesExternalFilterPass
Function
Should return true if external filter passes, otherwise false.
doesExternalFilterPass = (node: RowNode) => boolean;

isExternalFilterPresent

isExternalFilterPresent is called exactly once every time the grid senses a filter change. It should return true if external filtering is active or false otherwise. If you return true, doesExternalFilterPass will be called while filtering, otherwise doesExternalFilterPass will not be called.

doesExternalFilterPass

doesExternalFilterPass is called once for each row node in the grid. If you return false, the node will be excluded from the final set.

If the external filter changes, you need to call api.onFilterChanged() to tell the grid.

Example

The example below shows an external filter in action.