AdapTable Version:

Framework:

Column Filters

Summary

AdapTable offers very rich, powerful column filtering capability
Each Column Filter can contain multiple conditions (using Predicates) together with AND / OR functionality
These can either by System Predicates (provided by AdapTable) or Custom Predicates (defined by users)
Column Filters complement (and can be used together with) the Grid Filter
There are 2 Custom Filter Components provided:
- Filter Bar - between Column Header and first row of Grid
- Filter Form - available from Column Menu, Filter Tool Panel and other places

Column Filtering in AdapTable is extremely intuitive, rich and extensible.

Note

Column Filters complement, and work in conjunction, with the Grid Filter; both can be active at the same time

Users can create as many Column Filters as required and AdapTable will automatically update AG Grid so that only rows which match all Column Filters will be displayed

Hint

Filtering is a constant operation - Column Filters will be continually re-applied as data in the grid changes

Filter Components

AdapTable offers 2 Filter Components to enable users to perform run-time Column Filtering:

Filter Form, a rich, configurable component that provides full filtering capability
Filter Bar (underneath Column Header), designed to facilitate instant filtering (including wildcards)

Both components offer full, advanced, filtering capability including:

displaying all available Column Filter Predicates (for that Column) and any inputs required
support for Custom Predicates
a dedicated UI for In (and NotIn) Predicate enabling multiple values to be displayed and selected
automatically updating the Layout (and Layout State) as Column Filters are applied

Caution

The Filter Form and Filter Bar replace AG Grid's Filter Form and Floating Filter respectively
They are the only instances where AdapTable provides alternative, not complementary, functionality to AG Grid

Other Filter Components

In addition to the 2 Filter Components, run-time users can create and edit Column Filters in the Layout Wizard.

AdapTable also provides 4 other filter-related components.

These allow Users to clear or suspend some or all current Column Filters and are available as:

Predicates

Column Filters are essentially a simple combination of 2 objects:

an Adaptable Column - where the Column Filter is applied
a Predicate (a boolean function dynamically evaluated by AdapTableQL) - what is applied

Find Out More

AdapTable offers many System Predicates available for Filtering for each Column DataType
See the Adaptable QL Predicate Guide for full details about Predictates which are widely-used across AdapTable

Filters

Fork Fork

This example shows 5 Column Filters applied across 2 Layouts:
The Filtered Layout contains 3 Filters:
- Language is 'Typescript' or 'JavaScript' using In Predicate (similar to SQL)
- Name ends with '.js. - using EndsWith Predicate
- Published since 2016 - using After Predicate
The MIT Layout contains 2 Filters:
- License equals 'MIT Licence' - using Is Predicate
- Github Stars between 20k and 90k - using Between Predicate
We have also chosen to display the Column Filter Toolbar in the Dashboard, and set the Clear and Suspend Buttons to be displayed

Try It Out

Switch between Layouts and see that the different Layout display different Filters
Change the Column Filter for the Langauage Column to include 'Javascript' and 'HTML' projects

import {AdaptableOptions} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Basic Filtering',

  initialState: {
    Dashboard: {
      ModuleButtons: ['ColumnFilter', 'SettingsPanel'],
      PinnedToolbars: ['Layout', 'ColumnFilter'],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout', 'ColumnFilter'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Filtered',
      Layouts: [
        {
          Name: 'Filtered',
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'pushed_at',
          ],
          ColumnFilters: [
            {
              ColumnId: 'language',
              Predicates: [
                {
                  PredicateId: 'In',
                  Inputs: ['TypeScript', 'JavaScript'],
                },
              ],
            },

            {
              ColumnId: 'name',
              Predicates: [
                {
                  PredicateId: 'EndsWith',
                  Inputs: ['.js'],
                },
              ],
            },
            {
              ColumnId: 'pushed_at',
              Predicates: [
                {
                  PredicateId: 'After',
                  Inputs: ['2016-01-01'],
                },
              ],
            },
          ],
        },
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'pushed_at',
          ],
          ColumnFilters: [
            {
              ColumnId: 'license',
              Predicates: [
                {
                  PredicateId: 'Is',
                  Inputs: ['MIT License'],
                },
              ],
            },
            {
              ColumnId: 'github_stars',
              Predicates: [
                {
                  PredicateId: 'Between',
                  Inputs: ['20000', '90000'],
                },
              ],
            },
          ],
          Name: 'MIT',
        },
      ],
    },
  },
};

Custom Predicates

As the demo above illustrates, most Column Filters use System Filter Predicates.

However Column Filters can also leverage bespoke, user-defined Custom Predicates.

Find Out More

The Guide to using Custom Filters explains more and contains demos
See Custom Predicate Definitions for in-depth instructions

Multiple Predicates

A Column Filter can contain multiple Predicates if required.

Hint

Multiple Predicates are also available in Alerts, Conditional Styling and Flashing Cells,

By default the Predicates are joined using AND logic, meaning all Predicates need to be true for a row to pass.

However the ColumnFilter object includes a PredicatesOperator property allowing for OR to be used instead.

When OR is used the row is displayed if any of the Conditions in the Column Filter return true

Note

Multiple Predicates can only be created in the Filter Form (and not the Filter Bar)

Multiple Predicate Filters

Fork Fork

This example shows 2 Column Filters each using Multiple Predicates (but with a different operator):
- Name - Contains 'e' AND EndsWith 's' (we explicitly added the AND operator but its not strictly required as its the default)
- Github Stars - LessThan 10000 OR GreaterThan 20000

Formatted Cells

AdapTableQL evaluates the Predicate based on the underlying value in the Cell.

Caution

AdapTable will evaluate Filters using the raw value of the cell (rather than the display value)

This means that if a column uses an AG Grid Cell Component (previously called a Cell Renderer), an AG Grid Value Formattter or an Adaptable Display Format, the filter is evaluated using the cell's underlying (i.e. raw) value, and not what is actually displayed in the Grid.

Note

One exception to this rule is the In Predicate which shows the cell's display value
But only if an AG Grid Value Formattter or Adaptable Display Format are used (and not an AG Grid Cell Component)

Using Column Filters

Run-time users are able to create and edit Column Filters using all the available Filter Components.

Caution

Unlike other Modules, Column Filters cannot be created in the Module's Settings Panel via a wizard
Filters can only be created using the UI Filter components or in the Layout Editor's Column Filter section

In addition, users can leverage the Column Filter Toolbar, Tool Panel, Status Bar Panel and Settings Panel to clear, suspend or share some or all current Filters.

Column Filters are persisted in the Layout section of the Adaptable State and then automatically re-applied on application re-start when the relevant Layout is loaded.

The Context Menu has a "Filter on Cell Value(s)" option (available only if the selected cells are in one Column).

This will create a new Equals Filter based on the value of what is the currently selected cell.

Note

If there is more than one distinct cell value in the Column's selection range, an IN filter is created instead

Seeing Current Filters

AdapTable shows users the currently applied Column Filters in AG Grid in the Filter Toolbar, Tool Panel, Status Bar and Settings Panel .

Note

Each provides a description of the Predicate and Column together with a Clear button

Hint

AG Grid indicates which Columns are filtered in the Column header and Filter Tool Panel (in Sidebar)
AdapTable changes the style of the Column Header for any currently filtered columns

Suspending Filters

Column Filters - like all AdapTable Objects - can be suspended. When a Column Filter is suspended, the Filter Bar and Filter Form show details of, but do not run, the associated Predicate.

Note

You need either to un-Suspend or Clear a suspended Filter before setting a new Filter for that Column

Filtering Dynamic Columns

In AdapTable Version 21.1, Column Filtering was extended to Columns created dynamically by AG Grid.

These dynamically generated Columns can all be filtered (click the links to see demos):

Row Grouped Columns (a filter icon in Row Grouped column opens the Filter Form when clicked)
Pivot Result Columns
Tree Grid Key Columns (but using AG Grid filters)

Configuring Filters

Developers are able to configure Filters at design time as follows:

Use Layout Initial State to define Column Filters
Use Column Filter Options section of Adaptable Options to configure Filters behaviour and display

Find Out More

See Defining Column Filters and Configuring Column Filters for more details

Column Filters

(Recorded with AdapTable v20.0)

FAQ

Why can't I filter Row Group Columns or Pivot Columns? Currently, AdapTable doesnt offer filtering on Columns dynamically created by AG Grid (i.e. Row Group, Pivot Result and Tree View columns). We plan to provide this in a forthcoming release.

Why doesn't the Column Filter work with my AG Grid Cell Component? AdapTable always filters on a cell's underlying (or raw) value than the display value. This is because the column could be numeric but the cell could display a string (e.g. '£24K'), so to ensure filters always work they are always applied on the underlying value.

Can we evaluate Column Filters on the server? Yes, via the evaluateAdaptableQLExternally property in Expression Options (see Server Evaluation for more details)

Caution

This option is only available if you are using the AG Grid Client Side Row Model.

Can we include AND or OR logic in a Column Filter Yes, this is available in Column Filters - and also in the Grid Filter

Why don't my Filters get applied when the data changes in my grid? By default AdapTable will re-run filters only for direct data changes (i.e. user edits rather than ticking data).

Find Out More

See Configuring Filters: Reacting To Data Changes for options on how to modify this behaviour

The Predicate for string columns is always 'Contains'. Can we change this to 'StartsWith'? Yes. Use the defaultTextColumnFilter property in Column Filter Options. Similar settings allow you to change the defaults for numeric and date columns.

Are we only able to set the Filter for the Current Layout? If you are using the Filter Bar or Filter Form to create Filters, then they do, indeed, only update the Current Layout. However you can use the Layout Wizard to set Column Filters for any Layout (and not just the Current one)

PreviousTechnical Reference NextFilter Components

Column Filters

Summary

Note

Hint

Filter Components

Caution

Other Filter Components

Predicates

Find Out More

Custom Predicates

Find Out More

Multiple Predicates

Hint

Note

Formatted Cells

Caution

Note

Using Column Filters

Caution

Creating Filter via Context Menu

Note

Seeing Current Filters

Note

Hint

Suspending Filters

Note

Filtering Dynamic Columns

Configuring Filters

Find Out More

Column Filters

FAQ

Caution

Find Out More