Custom Column Filters

Summary

Column Filters can use bespoke Custom Predicates in addition to the System Predicates that AdapTable provides

Most Column Filters use System Predicates which are shipped with AdapTable.

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

Find Out More

See Custom Predicate Definitions to learn how Developers can provide design-time Custom Predicates
Once defined, these will be displayed in in the Filter Components and available to be used in Filters

Custom Filters

Fork Fork

This example shows a Layout with 3 Column Filters each using a Custom Predicate:
- Github Stars uses the Popular Predicate - which only shows values with more than 10,000 stars
- Language uses the Scripting Predicate - which limits values to 'JavaScript' or 'TypeScript' (we also created a Conditional Style using this Predicate)
- Created has the Last Ten Years Predicate applied - which filters to dates in previous 10 - and has a Scope of all Date columns

Try It Out

Clear the Scripting Filter in the Language column and note how the cells with 'HTML' are not formatted (since they do not pass the Predicate which is still being used for Formatting)

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Filter Predicates',
  predicateOptions: {
    customPredicateDefs: [
      {
        id: 'popular',
        label: 'Popular',
        columnScope: {
          ColumnIds: ['github_stars'],
        },
        moduleScope: ['columnFilter'],
        handler(params: PredicateDefHandlerContext) {
          return params.value > 10000;
        },
      },
      {
        id: 'scripting',
        label: 'Scripting',
        columnScope: {
          ColumnIds: ['language'],
        },
        moduleScope: ['columnFilter', 'formatColumn'],
        handler(params: PredicateDefHandlerContext) {
          return params.value == 'JavaScript' || params.value == 'TypeScript';
        },
      },
      {
        id: 'last_ten_years',
        label: 'Last Ten Years',
        moduleScope: ['columnFilter'],
        columnScope: {
          DataTypes: ['date'],
        },
        handler(params: PredicateDefHandlerContext) {
          const now = new Date();
          const tenYearsAgo = new Date(now.setFullYear(now.getFullYear() - 10));
          return new Date(params.value) > tenYearsAgo;
        },
      },
    ],
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['ColumnFilter', 'SettingsPanel'],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout', 'ColumnFilter'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'week_issue_change',
            'github_stars',
            'open_pr_count',
            'created_at',
            'closed_issues_count',
            'pushed_at',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'updated_at',
            'topics',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
          ColumnFilters: [
            {
              ColumnId: 'github_stars',
              Predicates: [
                {
                  PredicateId: 'popular',
                },
              ],
            },
            {
              ColumnId: 'language',
              Predicates: [
                {
                  PredicateId: 'scripting',
                },
              ],
            },
            {
              ColumnId: 'created_at',
              Predicates: [
                {
                  PredicateId: 'last_ten_years',
                },
              ],
            },
          ],
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'style-all',
          Scope: {All: true},
          Rule: {
            Predicates: [
              {
                PredicateId: 'scripting',
              },
            ],
          },
          Style: {
            ForeColor: 'White',
            BackColor: 'Brown',
          },
        },
      ],
    },
  },
};

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

Predicate Inputs

Custom Filters, like all Predicates, are able to accept inputs - so they can be given a dynamic argument.

Custom Filters with Inputs

Fork Fork

This demo creates a Custom Filters that receives an input
Long String has a columnScope of String columns, and receives a number input which verifies if the string is big or not

Try It Out

Create a Column Filter on the Language Column using the Long String Custom Predicate and an input of 5: note that the 2 rows with HTML will be filtered out

Custom Time Filters

Custom Filters are useful when you want to filter a Date Colum using only Time.

AdapTable provides a large number of System Filters but they all operate on a Date, not the Time portion only.

Hint

This is particularly useful if you have a "Day Activity Grid" which just displays entries for a single day

Custom Filters using Time

Fork Fork

This demo creates 2 Custom Filters that use Time (both have columnScope of the Pushed column which we have changed to just show Times for today):
- Overnight returns true if the time in the Column is between midnight and the start of the day (9am)
- Recent receives a numeric input and returns true if the value is within the inputted number of hours
Note: we also removed some Date System Predicates to make it easier to see the 2 Custom Predicates

Try It Out

Run Column Filter on Pushed Column using Midnight Custom Predicate and note only values before 9am appear
Run Column Filter on Pushed Column using Recent Custom Predicate and an input of 5 and note: only rows with a value in last 5 hours are displayed

import {
  AdaptableOptions,
  PredicateDefHandlerContext,
  SystemFilterPredicateIds,
  SystemPredicatesContext,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Custom Filter using Time',
  predicateOptions: {
    customPredicateDefs: [
      {
        id: 'overnight',
        label: 'Overnight',
        columnScope: {ColumnIds: ['pushed_at']},
        moduleScope: ['columnFilter'],
        handler(params: PredicateDefHandlerContext) {
          const midnight = new Date();
          midnight.setHours(0, 0, 0, 0);
          const startofDay: Date = new Date();
          startofDay.setHours(9);
          return params.value > midnight && params.value < startofDay;
        },
        toString: () => `between midnight and 9 am`,
      },
      {
        id: 'recent',
        label: 'Recent',
        icon: {
          name: 'schedule',
        },
        columnScope: {ColumnIds: ['pushed_at']},
        moduleScope: ['columnFilter'],
        handler(params: PredicateDefHandlerContext) {
          if (params.inputs) {
            const input = params.inputs[0];
            const cellDate: Date = params.value as Date;
            const testDate: Date = new Date(
              new Date().setHours(new Date().getHours() - input)
            );
            return cellDate > testDate;
          }
          return false;
        },
        inputs: [{type: 'number'}],
        toString: ({inputs}) => `Date in last ${inputs[0]} hours`,
      },
    ],
    systemFilterPredicates: (context: SystemPredicatesContext) => {
      return context.systemPredicateDefs
        .map(predicate => predicate.id)
        .filter(predicateId => {
          return ![
            'ExcludeValues',
            'Blanks',
            'NonBlanks',
            'ThisQuarter',
            'ThisYear',
            'InPast',
            'InFuture',
            'Before',
            'NotOn',
            'NextWorkDay',
            'LastWorkDay',
          ].includes(predicateId);
        }) as SystemFilterPredicateIds;
    },
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['ColumnFilter'],
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'language',
            'pushed_at',
            'github_stars',
            'github_watchers',
            'open_issues_count',
            'created_at',
            'license',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-pushed_at',
          Scope: {
            ColumnIds: ['pushed_at'],
          },
          DisplayFormat: {
            Formatter: 'DateFormatter',
            Options: {
              Pattern: 'MMM do yyyy, H:mm',
            },
          },
        },
      ],
    },
  },
};

Referencing Other Columns

The handler property used when evaluating Custom Predicates is given the current row node in its context.

This allows you to create Custom Filters that reference other Columns in the Row as part of the evaluation.

Custom Filters accessing Other Columns

Fork Fork

This demo creates 2 Custom Filters that reference other Columns in the Row for its evaluation:
- Big Stars returns true for Github Stars Column if it is greater than 10,000 and Github Watchers is over 200
- Success returns true for Closed Issues Column if it is greater than the Closed PRs Column

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Filter Predicates Other Columns',
  predicateOptions: {
    customPredicateDefs: [
      {
        id: 'success',
        label: 'Success',
        columnScope: {
          ColumnIds: ['closed_issues_count'],
        },
        moduleScope: ['columnFilter'],
        handler(params: PredicateDefHandlerContext) {
          const framework: WebFramework = params.node.data;
          const closedPrs = framework.closed_pr_count;
          return params.value > closedPrs;
        },
      },
      {
        id: 'big_stars',
        label: 'Big Stars',
        columnScope: {
          ColumnIds: ['github_stars'],
        },
        moduleScope: ['columnFilter'],
        handler(params: PredicateDefHandlerContext) {
          const framework: WebFramework = params.node.data;
          const watchers = framework.github_watchers;
          return params.value > 10000 && watchers > 200;
        },
      },
    ],
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['ColumnFilter', 'SettingsPanel'],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout', 'ColumnFilter'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'closed_issues_count',
            'closed_pr_count',
            'language',
            'github_stars',
            'github_watchers',
            'week_issue_change',
            'open_pr_count',
            'created_at',
            'pushed_at',
            'has_projects',
            'has_pages',
            'updated_at',
            'topics',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
          ColumnFilters: [
            {
              ColumnId: 'closed_issues_count',
              Predicates: [
                {
                  PredicateId: 'success',
                },
              ],
            },
            {
              ColumnId: 'github_stars',
              Predicates: [
                {
                  PredicateId: 'big_stars',
                },
              ],
            },
          ],
        },
      ],
    },
  },
};

Overriding System Filters

In addition to providing new Custom Filters, developers can provide Custom Filters which override the System Predicates shipped by AdapTable.

Hint

Make sure that the Custom Predicate has the same id as the System Predicate it replaces

This replaces the implementation for the System Filter provided by AdapTable with the custom behaviour.

Note

The Custom Predicate is placed in the same position in the Filter List as the System Predicate it replaces
The icon which is displayed in the Filter Predicate dropdown is that of the overridden System Predicate

Find Out More

See Overriding System Predicates for more information and a full, explanatory, demo

Providing AdapTable with Custom Filters

(Recorded with AdapTable v16.2)

AdapTable Resources

PreviousSystem Filters NextDefining Filters

Framework: