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

Using AG Grid Filtering

By default AdapTable provides its own Filter controls instead of those provided by AG Grid.

Note

This is the only place in AdapTable where it provides alternative, rather than complementary, functionality

We do this because we think that AdapTable offers a richer, more intuitive and more configurable set of Filters.

AdapTable provides Filters in Layouts meaning you can save,and easily switch between, different Filter sets.

Hint

An additional benefit is that AdapTable allows users to access Grid Filter and Column Filters simultaneously
This is not possible using the AG Grid equivalents, where you need to choose between them

In the rare use case where AG Grid's filters are preferred, they can easily be turned on by setting useAdaptableFiltering to false in Filter Options.

Note

This does not remove AdapTable Filtering logic, e.g the API functions will all stil operate
However it does hide all AdapTable Filtering UI controls so they cannot be accessed accidentally

useAdaptableFiltering

Default: true

boolean

Turns of AdapTable Filtering and uses AG Grid Filters

Use this property to specify usage of AG Grid's Filters (in preference to those provided by AdapTable).

// Use AG Grid Filters and hide AdapTable's filters
const adaptableOptions: AdaptableOptions = {
  filterOptions - {}
    useAdaptableFiltering: false
  }
};

Using AG Grid Filtering

Fork Fork

In this example we have turned off AdapTable Filtering (and use AG Grid's instead)
As a reuslt we see AG Grid filters in the Filter Bar, Filter Form and Filter ToolPanel
Additionally Column Filters and Grid Filter are absent from the Layout and all Adaptable Filtering controls (toolpanels, toolbars etc) are missing

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.

Caution

This will override the Filterable property value in the Calculated Column or Free Text Column definition

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

Note

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

// Allow Calculated & Free Text Columns to be filterable
const adaptableOptions: AdaptableOptions = {
  filterOptions:{
    enableFilterOnSpecialColumns: false
  }
};

// But override at Calculated Column level
CalculatedColumn: {
  CalculatedColumns: [
    {
      ColumnId: 'total_pr_count',
      Query: { ScalarExpression: '[open_pr_count] + [closed_pr_count]' },
      CalculatedColumnSettings: {
        DataType: 'number',
        Filterable: 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 Column or Grid 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 from the previous session, and display a non-filtered AG Grid instance.

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

Hint

The clearQuickSearchOnStartUp property in Quick Search Options will clear a saved Quick Search

Filtering when Data Changes

By default 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

If this is not desired behaviour, set the indicateFilteredColumns property to false.

Caution

AG Grid will still indicate filtered Columns by providing a different filter icon in the Column Header
You will need to change the AG Grid css to handle this

indicateFilteredColumns

Default: true

boolean

Style Column Header to 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: