Manually Applying Column Filters

Summary

Column Filtering in AdapTable can be configured so that Filters are only applied when a button is clicked
This is particularly useful if you wish to use the IN filter or you are using the server side row model

By default Column Filters are applied as soon as they are created or edited, so users can see the results immediately.

However sometimes this behaviour can be unwelcome.

Note

This is often the case when evaluating Column Filters on the Server, or the In Filter is being used

For this reason, AdapTable allows auto-evaluation of Column Filters to be turned off when necessary.

This is done via the manuallyApplyColumnFilter property in Column Filter Options.

manuallyApplyColumnFilter

Default: false

boolean

Manually apply Column Filter only after a button is clicked

Set this property to true to stop AdapTable immediately evaluating Column Filter changes.

Instead an Apply Filter button will display in the Filter Form (and the Filter Bar will be disabled).

Only upon clicking this button, will the Column Filter be applied.

This property can be provided as a 'hard-coded' boolean value:

// Don't apply Column Filters automatically but instead after a button is clicked
const adaptableOptions: AdaptableOptions = {
    filterOptions: {
      columnFilterOptions: {
          manuallyApplyColumnFilter: false
      }
    }
};

Or via a boolean function which receives an AdaptableColumnContext which simply contains the current Column:

Property	Description
column	The current Column
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

// Don't apply Column Filters automatically for string columns
const adaptableOptions: AdaptableOptions = {
  filterOptions:{
    columnFilterOptions = {
      manuallyApplyColumnFilter: (context: AdaptableColumnContext) => {
        return context.column.dataType === 'text';
      },
    }
  }
};

In this scenario, AdapTable will not apply Column Filters immediately.

Caution

AdapTable will disable the Filter Bar for any Column where Manually-applying Filters is turned on

Instead 2 extra buttons are displayed in the Filter Form:

Apply Filter - only when that button is clicked are Column Filters evaluated and applied
Reset Filter - resets the Filters to what was previously applied (not the same as clearing)

Manually Apply Filters

Fork Fork

In this example we set manuallyApplyColumnFilter to true for String Columns
As a result Column Filters in String Columns are not applied in the Filter Form automatically - only when the Apply Filter button is clicked
Additionally, the Filter Bar is disabled for these Columns and the Filter Form opens instead

PreviousConfiguring Filters NextTechnical Reference