AdapTable Version:

Framework:

Configuring Column Filters

Summary

Column Filtering in AdapTable includes advanced features for more demanding use cases
These are primarily available in Column Filter Options and allow developers to configure Filtering as needed

AdapTable provides many configuration options which allow developers to set up Column Filtering to meet precise requirements.

Most of these are available in the Column Filter Options section of Adaptable Options.

Find Out More

This page lists some general Column Filtering options
See Filter Components and In Filter for options to configure those UI Filter Components

Non Filterable Rows

By default all data rows in AdapTable will be evaluated in Column Filtering.

Occasionally, the use case arises where some rows should always be present and never subject to filtering.

This can be configured using the isRowFilterable property in Column Filter Options.

isRowFilterable

Default: true

boolean

Configures which Data Rows cannot be filtered

By default AdapTableQL will evaluate every row in the Grid when it applies a Column Filter.

Use this property to specify which rows should never be filtered.

isRowFilterable?: (context: IsRowFilterableContext) => boolean;

The property takes the form of a function that receives an IsRowFilterableContext object and returns a boolean.

The IsRowFilterableContext is defined as follows:

Property	Description
data	The data in the Row Node
rowNode	The Row Node about to be evaluated
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

// Don't filter on the first row in each Row Group and any row where the Language is TypeScript
const adaptableOptions: AdaptableOptions = {
  filterOptions - {}
    columnFilterOptions = {
        isRowFilterable: (context: IsRowFilterableContext) => {
            return context.rowNode.firstChild || context.data['language'] === 'TypeScript';
      },
    }
};

Non-Filterable Rows

Fork Fork

In this example we provide an implementation for isRowFilterable property, so these rows are never filtered:
- the first row in the Grid
- any row where Language is 'HTML'
We filter the Language column on 'TypeScript' but still see "JavaScript" for the Language column in first row, and see 'HTML' as those rows are excluded from filtering

Non Filterable Rows

(Recorded with AdapTable v18.1)

Filtering on Special Columns

By default, AdapTable allows all Calculated Columns and FreeText Columns to be filterable.

This behaviour can be changed via the enableFilterOnSpecialColumns property in Filter Options.

enableFilterOnSpecialColumns

Default: true

boolean

Allows filtering on Calculated and FreeText columns

Setting this property to false will disallow filtering on all Calculated and Free Text Columns.

Note

If this property is true, you can still set filtering to false on a per Calculated / Free Text Column basis

// Don't allow Calculated or Free Text Columns to be filterable
const adaptableOptions: AdaptableOptions = {
  filterOptions:{
    enableFilterOnSpecialColumns: false
  }
};

Clearing Column Filters on Startup

AdapTable always saves previously applied Column Filters (and the Grid Filter) into AdapTable State (via the Current Layout).

It will then automatically re-apply these Filters when the Application is reloaded.

If this behaviour is not desired, set the clearFiltersOnStartUp property in Filter Options to true.

clearFiltersOnStartUp

Default: false

boolean

Clear any Filters applied in previous session when Application re-starts

AdapTable saves all User State to either local or remote storage, including Column Filters.

It then re-applies any persisted Columns Filters when the application re-starts.

Setting this property to true will remove any Column Filters in Adaptable State in the previous session, and display a non-filtered AG Grid instance.

// Clear any previously set Column Filters when AdapTable starts
const adaptableOptions: AdaptableOptions = {
    filterOptions = {
        clearFiltersOnStartUp: true
    }
};

Hint

The clearQuickSearchOnStartUp property in Quick Search Options will clear a saved Quick Search
The clearGridFilterOnStartUp property in Grid Filter Options will clear a saved Grid Filter

Filtering when Data Changes

By defaul AdapTable automatically and immediately re-applies all Filters whenever data changes in AG Grid.

Note

This includes both types of data changes - User Edit or Underlying Data Ticking.

Developers can amend this behaviour via the filterActionOnDataChange property in Filter Options.

Automatic re-filtering can be turned off altogether, or a Throttle can be applied.

filterActionOnDataChange

Default: Always

FilterActionOnDataChange

When to re-filter AG Grid after data changes

FilterActionOnDataChange

Use this property to change AdapTable's behaviour of always filtering after an edit so either:

AG Grid is never re-filtered
It is re-filtered after a throttle (also defined in this object)

The property is of type FilterActionOnDataChange which is defined as follows:

Property	Description
applyFilter	When to re-apply Filters: 'Always', 'Never' or 'Throttle'
throttleDelay	Delay in ms (when `applyFilter` is set to 'Throttle')

// Never re-apply filters automatically following user edits
const adaptableOptions: AdaptableOptions = {
  filterOptions:{
    filterActionOnDataChange: {
        applyFilter: 'Never',
    },
  }
};

//Re-apply filters after data changes, but using a throttle of half a second
const adaptableOptions: AdaptableOptions = {
  filterOptions:{
    filterActionOnDataChange: {
        applyFilter: 'Throttle',
        throttleDelay: 500
    },
  }
};

Caution

AG Grid automatically re-applies filters (effectively bypassing this property) if the Grid data is updated using:
- applyTransaction in AG Grid's GridAPI
- updateData or manageGridData in Adaptable GridAPI

Indicating Filtered Columns

AdapTable distinctively renders the Column Header for any currently filtered columns.

Note

This is particularly helpful when users restart the application, unaware that filters were persisted

In the rare case that this is not desired behaviour, set the indicateFilteredColumns property to false.

indicateFilteredColumns

Default: true

boolean

Visually identify which Columns are currently filtered

Stops AdapTable from making the Header for currently filtered columns distinctive.

// Don't distinctively show Filtered Columns
const adaptableOptions: AdaptableOptions = {
  filterOptions:{
    columnFilterOptions: {
        indicateFilteredColumns: false
    }
  }
};

Column Filter Applied Event

AdapTable will fire the Column Filter Applied Event whenever a Column Filter changes.

This allows you to listen to Column Filters which have changed in AdapTable and react accordingly.

Hint

This is often used when wanting to evaluate expressions on the Server

Column Filter Applied Event

Fork Fork

In this example we listen to the Column Filter Applied Event and output the Event's info to the console

Try It Out

Create a Column Filter and inspect the Console to see the output from the Event

PreviousDefining Filters NextManually Applyling Filters

Framework: