AdapTable Version:

Framework:

AdapTable Grid Filter

Summary

AdapTable provides Grid Filters which will search AG Grid's data source and display only matching rows
It is a property of a Layout and complements (and can be used together with) Column Filters
Grid Filters wrap Boolean Expressions which are evaluated by AdapTableQL
Boolean Expressions can contain multiple conditions and operators and reference numerous columns
Grid Filters can be named and saved as Named Queries and then re-run as often as required

The AdapTable Grid Filter allows users to run complex, multi-condition searches across multiple Columns.

These will then be evaluated across the whole of AG Grid's data source.

Note

Grid Filters complement, and are designed to work in conjunction, with Column Filters
Both Grid and Column Filters can be active at the same time

AdapTable will display only those rows that match all the Conditions in the Grid Filter.

Hint

Grid Filters differ from Quick Search in that they display matching rows, rather than higlight matching cells

The Grid Filter is saved (and can be defined) in the Current Layout.

Caution

There can only be one active Grid Filter at any time

Boolean Expressions

Grid Filters are essentially wrappers around Boolean Expressions - powerful, configurable, querying constructs that can contain multiple conditions and operators and will return a boolean (true/false) result.

Caution

Some Expressions (e.g. those used by Calculated Columns) can have any return type, but a Grid Filter Expression must always return a Boolean value

As with all Expressions, Grid Filters are evaluated by AdapTableQL - AdapTable's native Query Language.

Grid Filters can be hand written directly in the Grid Filter Toolbar but AdapTable provides two UI components to facilitate the creation of Boolean Expressions:

a Query Builder for standard Expressions
an Expression Editor for more complex requirements

Applying a Grid Filter

Fork Fork

This example runs a Grid Filter which returns the most popular JavaScript packages
The Expression is [language]="JavaScript" AND ([github_watchers] > 2000 OR [github_stars] > 14500)
The Grid Filter Toolbar has been Pinned so it sits above the Grid

Try It Out

See how the Grid Filter updates by editing the Expression directly in the Grid Filter Toolbar
Alternatively, click the Expand button (which shows 2 arrows) on the left of the Toolbar to open the Query Builder and Expression Editor

Named Queries

Grid Filters are typically created on the fly, evaluated immediatedly, and then cleared when no longer needed.

However, if required, Grid Filter Expressions can be named and saved in order to be re-used at a later date.

In this scenario it is called a Named Query and persisted into Named Query State.

It will then be available for loading at a later point in time (in this or future sessions).

Find Out More

See Named Queries for full details on this topic

Comparing Columns

One advantage of the Grid Filter over Column Filters is that it can be used to compare values in 2 Columns.

This can be done in both the Query Builder and the Expression Editor.

Note

Only rows which pass both sets of evaluation will be displayed

Comparing Column values with the Grid Filter

Fork Fork

This example runs a Grid Filter which compares 2 sets of columns
The Expression is: [closed_issues_count] > [closed_pr_count] AND [pushed_at] = [updated_at]

Try It Out

Open the Grid Filter in the Expression Editor or Query Builder to see how the Columns are compared

Grid Filter with Column Filters

The Grid Filter can be applied simultaneously with any Column Filters.

Note

Only rows which pass both sets of evaluation will be displayed in the Grid

Grid Filter and Column Filters

Fork Fork

This example runs a Grid Filter as well as 4 Column Filters
Only the 3 rows which pass both sets of evaluations are displayed

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Grid Filter with Column Filters',
  initialState: {
    Dashboard: {
      PinnedToolbars: ['GridFilter'],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['GridFilter'],
        },
      ],
    },

    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'github_watchers',
            'license',
            'pushed_at',
            'updated_at',
            'has_wiki',
            'created_at',
            'description',
            'open_issues_count',
            'topics',
          ],
          GridFilter: {
            Expression: '[license]="MIT License" OR [github_watchers] > 2000',
          },
          ColumnFilters: [
            {
              ColumnId: 'language',
              Predicates: [
                {
                  PredicateId: 'In',
                  Inputs: ['TypeScript', 'JavaScript'],
                },
              ],
            },
            {
              ColumnId: 'github_stars',
              Predicates: [
                {
                  PredicateId: 'Between',
                  Inputs: ['5000', '90000'],
                },
              ],
            },
            {
              ColumnId: 'name',
              Predicates: [
                {
                  PredicateId: 'EndsWith',
                  Inputs: ['.js'],
                },
              ],
            },
            {
              ColumnId: 'pushed_at',
              Predicates: [
                {
                  PredicateId: 'After',
                  Inputs: ['2016-01-01'],
                },
              ],
            },
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Managing the Grid Filter

The Grid Filter is accessible to both design-time and run-time users as follows:

Developers can define a GridFilter (using the GridFilter property inthe Layout Definition)
Developers can configure the GridFilter to match custom requirements
Run-time users can use (ie. set, edit, clear, save, reload etc) the Grid Filter

Find Out More

See Defining the Grid Filter or Configuring the Grid Filter or Using the Grid Filter for more information

UI Entitlements

The UI Entitlements behaviour for Grid Filter is as follows:

Full - Grid Filters can be run fully and the UI components are available and display normally
Hidden - No Grid Filter UI components are visible or available
ReadOnly - Grid Filters can be created and run, but they cannot be saved as Named Queries

AdapTable Grid Filter

(Recorded with AdapTable v17.0)

FAQ

Can we evaluate Grid 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 re-use the same Grid Filter Expression in different Modules - e.g. as a Plus / Minus Rule and a Report? Yes. By saving the Grid Filter as a Named Query, you can re-use the Expression for searching, styling, reports etc.

Will the Grid Filter disappear if I run Quick Search or apply a Column Filter? No, all these different types of Searches are additive so they will all be applied individually if provided.

AdapTable Resources

AdapTableQL Expressions

PreviousTechnical Reference NextDefining Grid Filter

Framework: