Quick Filter Bar

The Quick Filter Bar is a control displayed between the Column Header and the first data row in the grid.

note

The type of the control varies depending on the Data Type of the column (e.g. a TextBox for strings, a Date Picker for dates).

The Quick Filter Bar is designed to allow for Column Filters to be created manually through text entry.

caution

In version 23 of AG Grid the Quick Filter Bar is set at column level and not grid level (through the floatingFilter property) so the Quick Filter bar will only appear if at least one column has this property set to *true** (and it is enabled just for those columns).

The left hand side of the Quick Filter Bar contains a dropdown showing all the System and Custom Filters with scope for that column.

If the relevant predicate has inputs then the textbox will be enabled for these to be entered; otherwise it merely displays the name of the current predicate.

tip

If the predicate type is 'IN' (i.e. column values) then a list of all distinct values for that column will display.

AdapTable provides wildcard support to make it easy to switch between predicates in the textbox itself, e.g. typing '>' will switch to 'GreaterThan'. (See the full list in the Predicate documentation).

Setting Quick Filter Bar Visibility

The Quick Filter Bar can be hidden / displayed at run-time in numerous ways including:

  • 'Show Quick Filter' Checkbox in the Filter Toolbar
  • 'Show / Hide Quick Filter Bar' Column Menu Item

To set Quick Filter Bar visibility at design-time use the IsQuickFilterVisible property in Filter State.

tip

This is only relevant, of course, if you have at least one column set to show Quick Filter in Grid Options

This is a persistable property meaning that if the User hides the Quick Filter Bar then it will show as hidden the next time the Grid loads.

Default Predicates

Each DataType has a default predicate which is selected in the Quick Filter Bar:

  • Number - Equals
  • String - Contains
  • Date - On

These can be changed in Filter Options; the available values are:

PropertyOptions
defaultNumericColumnFilterGreaterThan, LessThan, Equals, NotEquals
defaultStringColumnFilterIs, IsNot, Contains, NotContains, StartsWith, EndsWith, Regex
defaultDateColumnFilterAfter, Before, On, NotOn
// Set the defaut filter type for Number, String and Date columns
// to 'GreaterThan, 'StartsWith' and 'After' respectively
// Set the Filter Form to display Predicates (rather than Column Values) on opening
filterOptions = {
defaultNumericColumnFilter: 'GreaterThan',
defaultStringColumnFilter: 'StartsWith',
defaultDateColumnFilter: 'After',
defaultFilterFormTab: 'Predicates'
};

Hiding Quick Filter Dropdown

By default the little dropdown on the left of the Quick Filter Bar will always appear.

note

This makes sense in most cases as it offers a convenient way to change the Filter type.

But for some (e.g. Boolean) columns the options it provides might not be required, or screen estate might be at a real premium.

The hideQuickFilterDropdown property is a function to be provided by developers at Design-time that will not display this dropdown for particular columns:

filterOptions = {
// Don't show the Dropdown for Boolean columns
hideQuickFilterDropdown: (column: AdaptableColumn) => {
return column.DataType == 'Boolean';
},
};

Hiding Quick Filter Input

A related scenario to that above, is where the user wants to display the Dropdown but not the actual input control in the Quick Filter Bar.

This is rarely required but can be useful where the only Predicates available for a column don't require an input.

note

Another use case is for Boolean columns where you only want to use the Dropdown and not the checkbox

The hideQuickFilterInput property is a function to be provided by developers at Design-time that will not display the Input for particular columns:

filterOptions = {
// Don't show the Input for Date columns
hideQuickFilterInput: (column: AdaptableColumn) => {
return column.DataType == 'Date';
},
};

Which Quick Filter Bar?

By default AdapTable will use its own Quick Filter Bar.

To only use that provided by AG Grid instead set useAdaptableQuickFilter to false:

filterOptions = {
useAdaptableQuickFilter: false,
};

Alternatively, if you wish to use the AdapTable Quick Filter Bar just for some columns then provide a list instead:

filterOptions = {
// Use the AdapTable Quick Filter Bar for these columns only
// and the vendor grid's components for all others
useAdaptableQuickFilter: ['bid', 'ask', 'counterparty', 'currency'],
};
warning

You cannot provide a list of the columns that should have a vendor grid

Quick Filter Trigger

By default the Quick Filter dropdown (the menu to the left of the Quick Filter Bar) will open when the mouse hovers over it.

note

This is by design to enable quick access to filtering without needing to click the menu

Some users find this behaviour annoying; so to turn it off simply set quickFilterTrigger to false

filterOptions = {
quickFilterTrigger: false
};

Quick Filter Bar Wildcards

The Quick Filter Bar accepts some wildcard values for very fast entry, which are as follows:

SymbolPredicateColumns
=EqualsText, Number
>Greater ThanNumber
<Less ThanNumber
:BetweenNumber
[IN / ValuesAll
#IN / ValuesAll