AdapTable Version:

Framework:

System Filter Predicates

Summary

AdapTable provides multiple System Predicates available for use in Column Filters
Developers are able to choose on a per-column basis which of these Predicates are available to their users
They can also select the default Predicate (for each Column or DataType)

Available System Filters

This is the full list of System Predicates shipped by AdapTable which are available for Column Filters:

Note

All includes array types as well number, text, date and boolean

Predicate	Column Data Type	No.of Inputs
`Blanks`	All	0
`NonBlanks`	All	0
`In`	All	n
`NotIn`	All	n
`Equals`	number	1
`NotEquals`	number	1
`GreaterThan`	number	1
`LessThan`	number	1
`Positive`	number	0
`Negative`	number	0
`Zero`	number	0
`Between`	number	2
`NotBetween`	number	2
`Is`	text	1
`IsNot`	text	1
`Contains`	text	1
`NotContains`	text	1
`StartsWith`	text	1
`EndsWith`	text	1
`Regex`	text	1
`Today`	date	0
`Yesterday`	date	0
`Tomorrow`	date	0
`ThisWeek`	date	0
`ThisMonth`	date	0
`ThisQuarter`	date	0
`ThisYear`	date	0
`InPast`	date	0
`InFuture`	date	0
`Before`	date	1
`After`	date	1
`On`	date	1
`NotOn`	date	1
`NextWorkDay`	date	0
`LastWorkDay`	date	0
`WorkDay`	date	0
`Holiday`	date	0
`Range`	date	2
`True`	boolean	0
`False`	boolean	0

Limiting System Filters

By default all Predicates shipped by AdapTable are fully available in the Module to which they are entitled.

This means that all the Predicates listed above which can be used in Filtering will be available to users.

AdapTable provides the systemFilterPredicates property in Predicate Options to override this if required.

systemFilterPredicates

Default: [all]

string[] or function

Which System Filter Predicates are available in AdapTable

The System Filter Predicates displayed by AdapTable can be limited using this property in 2 ways:

Providing a List – The simplest way to set System Filters is to provide a List of the PredicateIds to display:

// Only make 3 (of the many) System Filters available
const adaptableOptions: AdaptableOptions = {
    predicateOptions: {
        systemFilterPredicates: ['Positive', 'Today', 'Blanks'],
    }
};

Providing a Function – Alternatively this property can be a JavaScript function which returns a list of System Filters.

Hint

Using a Function enables you to provide different System Filter Predicates for different columns

The function receives a receives an object of type SystemPredicatesContext which is defined as follows:

Property	Description
columnScope	Current Scope where Predicates are being used
moduleScope	Module for which Predicates are being retrieved
systemPredicateDefs	AdapTable-provided System Predicate Definitions
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

Caution

The columnScope property always contains a single ColumnIds array with one item - the current ColumnId

// Remove 4 System Filters from the List
const adaptableOptions: AdaptableOptions = {
      predicateOptions: {
          systemFilterPredicates: (context: SystemPredicatesContext) => {
            return context.systemPredicateDefs
              .map((predicate) => predicate.id)
              .filter((predicateId) => {
                return ['Contains', 'ThisWeek', 'ThisMonth', 'GreaterThan'].includes(predicateId);
          }) as SystemFilterPredicateIds;
      },
    }
};

System Filters

Fork Fork

This demo shows how to limit which System Filter Predicates are available in AdapTable by using the systemFilterPredicates property in Predicate Options
It provides a function which contains this logic:
- The Name Column will only display the Contains, EndsWith and Regex System Predicates
- All other Columns will show whichever of the GreaterThan, LessThan, ThisMonth, ThisQuarter and In System Predicates are relevant to that Column

Expand to see how System Filters are limited

predicateOptions: {
  systemFilterPredicates: (context: SystemPredicatesContext) => {
    const scope: ColumnScope = context.columnScope;
    const columnIdsInScope: string[] | undefined = context.adaptableApi.columnScopeApi.getColumnIdsInScope(scope);
    return columnIdsInScope?.includes('name')
      ? ['Contains', 'EndsWith', 'Regex']
      : ['Contains', 'GreaterThan', 'Equals', 'ThisMonth', 'Is', 'In'];
  },
},

Try It Out

Open the various filter dropdowns and see that there is a much reduced list of Filters available
Open the Name dropdown and see that the list provided in the function just for that column is shown

Default Filter Predicates

AdapTable sets a default Filter Predicate to use for 4 Column Data Types.

However, each of these can be changed by using a relevant property in Column Filter Options:

Data Type	Options Property	Default	Available Values
text	`defaultTextColumnFilter`	`Contains`	`Is` `IsNot` `Contains` `NotContains` `In` `StartsWith` `EndsWith` `Regex`
numeric	`defaultNumericColumnFilter`	`Equals`	`GreaterThan` `LessThan` `Equals` `NotEquals` `In`
date	`defaultDateColumnFilter`	`On`	`After` `Before` `On` `NotOn` `In`
array	`defaultArrayColumnFilter`	`In`	`In` `NotIn` `Blanks` `NonBlanks`

Hint

It is also possible to set a different default Predicate for the Filter Bar and the Filter Form

Each property offers two types of return value:

a Predicate (relevant to the data type) directly
a function which receives an DefaultPredicateFilterContext object, and returns the Predicate

Note

This is particularly useful in the Filter Bar as it sets the Predicate that is displayed by default for the Column

Default Predicates for Filters

Fork Fork

This example sets the 4 different data-type related Default Predicate properties:
- defaultNumericColumnFilter - GreaterThan for Filter Bar and LessThan for Filter Form (provided hard-coded for both, so is same for all numeric columns)
- defaultTextColumnFilter - StartsWith for all string columns except Language which is In
- defaultDateColumnFilter - Before for Created and Updated columns, and After for all other date columns
- defaultArrayColumnFilter - NotIn (provided hard-coded so is same for all array columns)

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Filter Default Predicate',
  filterOptions: {
    columnFilterOptions: {
      defaultNumericColumnFilter: (context: DefaultPredicateFilterContext) => {
        return context.filterComponent === 'FilterBar'
          ? 'GreaterThan'
          : 'LessThan';
      },
      defaultTextColumnFilter: (context: DefaultPredicateFilterContext) => {
        return context.column.columnId == 'language' ? 'In' : 'StartsWith';
      },
      defaultDateColumnFilter: (context: DefaultPredicateFilterContext) => {
        return context.column.columnId == 'created_at' ||
          context.column.columnId == 'updated_at'
          ? 'Before'
          : 'After';
      },
      defaultArrayColumnFilter: 'NotIn',
    },
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['ColumnFilter', 'SettingsPanel'],
      PinnedToolbars: ['ColumnFilter'],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout', 'ColumnFilter'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'created_at',
            'pushed_at',
            'topics',
            'updated_at',
            'github_watchers',
            'license',
            'has_projects',
            'has_pages',
            'has_wiki',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          ColumnSizing: {
            name: {Width: 100},
            language: {Width: 140},
            github_stars: {Width: 130},
            created_at: {Width: 160},
            pushed_at: {Width: 160},
            topics: {Width: 300},
            updated_at: {Width: 160},
            github_watchers: {Width: 130},
            license: {Width: 100},
            has_projects: {Width: 100},
            has_pages: {Width: 100},
            has_wiki: {Width: 100},
            week_issue_change: {Width: 100},
          },
        },
      ],
    },
  },
};

Default Text Predicate

Use the defaultTextColumnFilter property to set the default Predicate for text columns.

defaultTextColumnFilter

Default: Contains

Default Predicate to use for Text (string) Columns

Sets the Default Predicate to use for string / text Columns.

Options are: Is, IsNot, Contains (the default value), NotContains, StartsWith, EndsWith, In, Regex

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

const adaptableOptions: AdaptableOptions = {
  filterOptions:{
   columnFilterOptions = {
      defaultTextColumnFilter: 'StartsWith'
    }
  }
};

Or via a function which receives SystemPredicatesContext and returns a Text Predicate:

const adaptableOptions: AdaptableOptions = {
  filterOptions:{
   columnFilterOptions = {
      defaultTextColumnFilter: (context: DefaultPredicateFilterContext) => {
        return context.column.columnId == 'language' ? 'In' : 'StartsWith';
      },
    }
  }
};

Default Numeric Predicate

Use the defaultNumericColumnFilter property to set the default Predicate for Numeric columns.

defaultNumericColumnFilter

Default: Equals

GreaterThan|LessThan|Equals|NotEquals|In

Default Predicate to use for Numeric Columns

Sets the Default Predicate to use for numeric Columns.

Options for this property are: GreaterThan, LessThan, Equals (the default value), NotEquals, In

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

const adaptableOptions: AdaptableOptions = {
  filterOptions:{
     columnFilterOptions = {
        defaultNumericColumnFilter: 'GreaterThan'
    }
  }
};

Or via a function which receives SystemPredicatesContext and returns a Numeric Predicate:

const adaptableOptions: AdaptableOptions = {
  filterOptions:{
   columnFilterOptions = {
    defaultNumericColumnFilter: (context: DefaultPredicateFilterContext) => {
      return context.column.columnId == 'github_stars' ? 'GreaterThan' : 'LessThan';
    },
   }
  }
};

Default Date Predicate

Use the defaultDateColumnFilter property to set the default Predicate for Date columns.

defaultDateColumnFilter

Default: On

After|Before|On|NotOn|In

Default Predicate to use for Date Columns

Sets the Default Predicate to use for date Columns.

Options are: After, Before, On (the default value), NotOn, In

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

const adaptableOptions: AdaptableOptions = {
  filterOptions:{
    columnFilterOptions = {
      defaultDateColumnFilter: 'After'
    }
  }
};

Or via a function which receives SystemPredicatesContext and returns a Date Predicate:

const adaptableOptions: AdaptableOptions = {
  filterOptions:{
   columnFilterOptions = {
    defaultDateColumnFilter: (context: DefaultPredicateFilterContext) => {
      return context.column.columnId == 'created_at' ? 'Before' : 'After';
    },
   }
  }
};

Default Array Predicate

Use the defaultArrayColumnFilter property to set the default Predicate for Array (text and numeric) columns.

defaultArrayColumnFilter

Default: In

In|NotIn|Blanks|NonBlanks

Default Predicate to use for Array-based Columns

Sets the Default Predicate to use for Array Columns (both string and numeric).

Options are: In (the default value), NotIn, Blanks, NonBlanks

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

const adaptableOptions: AdaptableOptions = {
  filterOptions:{
    columnFilterOptions = {
      defaultArrayColumnFilter: 'Blanks'
    }
  }
};

Or via a function which receives SystemPredicatesContext and returns an Array Predicate:

const adaptableOptions: AdaptableOptions = {
  filterOptions:{
   columnFilterOptions = {
    defaultArrayColumnFilter: (context: DefaultPredicateFilterContext) => {
      return context.column.columnId == 'History' ? 'Blanks' : 'In';
    },
   }
  }
};

Previous'In' Column Filter NextCustom Filters

Framework: