Filter Form

Every column (which is marked as filterable) will display a Filter Form to enable speedy filter selection and creation.

The Filter Form appears in 2 places in AdapTable:

  1. When the Filter tab in the Column Menu is selected
  2. In the 'Filter' ToolPanel in the AG Grid sidebar (generally displayed on the right hand side of the grid)

Filter Form Tabs

The Filter Form contains 2 tabs:

  • Predicates - This lists all the available Predicates for this column (System and Custom) as radio buttons. Where a Predicate requirs an input (e.g. 'GreaterThan') this will appear when the Predicate is selected.

  • Column Values - This lists all the distinct Column Values for that Column (or any Permitted Values if they have been set). Each value is a checkbox enabling multiple items to be selected.

    tip

    Column Values become an 'IN' Predicate.

Default Filter Tab

By default the Filter Form displays the Column Values tab when it opens; set defaultFilterFormTab to 'Predicates' in Filter Options if you would prefer it to display the list of Predicates instead:

filterOptions = {
// Show the Predicates Tab when opening the Filter Form
defaultFilterFormTab:'Predicates'
};

Which Filter Form?

By default AdapTable will show its own Filter Form whenever filters need to be displayed (i.e. in each Column Header and the Filters ToolPanel).

To use the Filter Form provided by AG Grid, instead, set useAdaptableFilterForm to false in Filter Options:

filterOptions = {
useAdaptableFilterForm: false,
};

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

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

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

note

If you wish to provide your own custom Filter Form which you will need to do so via AG Grid

Identifiying Filtered Columns

AdapTable makes it easy for users to see at a glance which columns have filters applied to them.

This is achieved by the indicateFilteredColumns property in Filter Options.

It defaults to true and will distinctly render the Column Header for any filtered columns.

filterOptions = {
indicateFilteredColumns: true
};

Clearing Filters Manually

To manually remove the filter for a column click the 'Clear' button in the Filter Form or in the Column Filter Toolbar.

Clearing Filters At Startup

AdapTable saves all User State automatically, including Filters, so that it is available on application re-start.

This behaviour can be overriden by setting the clearFiltersOnStartUp property in Filter Options to true.

This will remove any filters that were applied in the previous session while AdapTable is initialising.

filterOptions = {
clearFiltersOnStartUp: true
};

Auto-Applying Filters

By default a Column Filter gets applied automatically - and the grid is updated accordingly - each time a change is made to any predicate in the Filter Form (e.g. another column value is added to an 'IN' predicate).

Where this is not the desired behaviour (e.g. if you are peforming filtering on the server and want to apply a single operation after all changes have been mmade), set autoApplyFilter to false in Filter Options and a button will appear in the filter form; only on clicking that will the Filter be applied.

filterOptions = {
autoApplyFilter: true
};

Showing Column Values in Filters

When displaying the current distinct column values in the Filter Form (or the 'In' popup of Quick Filter), AdapTable will show, by default, the first 2,000 items.

To show a different number of items, set the maxFilterValuesToDisplay property in Filter Options:

filterOptions = {
// Only show 1,000 items in Filter Form (rather than default 2,000)
maxFilterValuesToDisplay: 1000
};

Reacting to Data Changes

What happens if you have Column Filters applied and data changes in the Grid?

The result is dependent on 2 properties in Filter Options whose default behaviour is as follows::

PropertyWhen CalledRe-apply Filters
filterActionOnUserDataChangeUser edits a cellAlways
filterActionOnExternalDataChangeUnderlying grid data ticksNever

Both properties are of type FilterActionOnDataChange which is defined as follows:

PropertyDescription
applyFilterWhen to re-apply Filters: 'Always', 'Never' or 'Throttle'
throttleDelayDelay in ms (when applyFilter is set to 'Throttle')
caution

Setting applyFilter to 'Always' for external data changes can be harmful if you have data 'ticking' hundreds of thousands of times a second

// Re-apply Filters after a User edit after a 50ms throttle
// But never re-apply Filters after data ticks
filterOptions = {
filterActionOnUserDataChange: {
applyFilter: 'Throttle',
throttleDelay: 50
},
filterActionOnExternalDataChange: {
applyFilter: 'Never'
}
};

Filter Form Style

AdapTable provides a native style for the Filter Form which we hope is pleasing to the eye.

However it is not designed with the underlying AG Grid theme in mind.

This is the purpose of the useVendorFilterFormStyle property which will style the Filter Form to match with AG Grid.

Simply set this to true for a more integrated look and feel:

filterOptions = {
useVendorFilterFormStyle: true
};

Filter Sort Order

When filtering on column values, the order provided in the UI is according to appearance in the Grid.

Sometimes the desired behaviour is to see column values appear in the filter dropdown using the currently applied sort order as.

tip

This is useful if a Date Column is sorted in reverse order and you wish the filter values to reflect that

This can be achieved by setting sortColumnValuesInFilter to true in Filter Options

filterOptions = {
sortColumnValuesInFilter: true
};
note

This will apply also if the current sort has been applied using a Custom Sort