Column Filters

The 'In' Column Filter Predicate

Summary

  • The In Filter is a special Column Filter that shows distinct Column Values
  • It is available in both the Filter Bar and the Filter Form
  • Each distinct value in the Column is displayed with a checkbox alongside it for selection
  • Developers have great flexibility in populating and rendering this list

AdapTable provides an In (and associated NotIn) Predicate to enable filtering on multiple column values.

Hint

This Predicate is selected by choosing the In Filter option in the Filter Predicates dropdown

When this is selected AdapTable's Filter Components display a list of all distinct items in the Column, together with an associated Checkbox indicating whether that value should be included in the Filter.

AdapTable provides developers with flexible, fine-grained control over each distinct Column value.

Custom Column Values

By default, AdapTable populates the In Filter dropdown by looping through all the values in AG Grid for the column, retrieving and then displaying the distinct items.

Note

  • AdapTable will ignore case sensitivity by default, e.g. will return "EUR" and "eur" as 2 separate items
  • This can be changed by setting the caseSensitivePredicates property in Predicate Options to true

Alternatively, developers can supply bespoke values to be displayed instead.

This is done by using the customInFilterValues property in Filter Options which allows extremely flexible and fine-grained control over which values are displayed and how they are rendered.

Caution

  • However this flexibilty can come with a potential performance cost, especially in Grids with large data sets
  • Use with care when displaying or counting visible values, when Row Grouping is active - see below for more details

The customInFilterValues property also populates the In predicate in the Query Builder (used by Grid Filter).

Note

This property is the equivalent of the filterValueGetter used by AG Grid's Set Filter, but which AdapTable ignores

customInFilterValues

InFilterValueResult[]
Provide custom list of values to display for "In" Predicate

There are multiple potential use cases for custom values, the most common of which are described here.

Note

In each demo we set the defaultTextColumnFilter in Column Filter Options to In for ease of access

Values Count

A common preference is to indicate how frequently each distinct item appears in the Grid.

This is achieved by leveraging the count property in the function's context.

In Filter: Values Count
Fork
  • This demo updates the Label to include the count of each item

Filtered Values Only

Another common use case is to list only values which are currently displayed in the Grid.

In other words to skip values that only appear in Rows which have been previously filtered out.

Note

This means that values which are in collapsed Row Groups will still be included in the list

This is achieved by using the visible property provided by the function for each item.

In Filter: Only Visible Values
Fork
  • This demo only lists values in In filter which are currently in the Grid (i.e. in filtered rows)
  • Note: HTML does not appear in the Language Column's filter as its not present in the (filtered) grid

Filtered Values Count

Some users wish to display the list of column values using both of the previous use cases, ie:

  • only display values which are in currently filtered rows
  • provide a count of those values - but using filtered rows only

This is achieved by using the 2 properties provided by the function:

  • visible - which states if that item is visible anywhere currently in the grid
  • visibleCount - how often that items appears currently in the Grid
In Filter: Only Visible Values with Count
Fork
  • This demo only lists values in In filter which are currently in the Grid (i.e. in filtered rows)
  • It also provides a count for each item
Try It Out
  • Click on the Language Column IN Filter to open the dropdown list of values
  • Note: (1) HTML does not appear as its not present in the (filtered) grid; (2) we see 9 and 11 as the 2 counts (matching the 11 currently filtered rows)

Displaying Raw Value

AdapTable displays the Cell's Display Value in the Label it renders (though it still filters on the Raw value).

It is straightforward to render the Raw, (not Display) Value by simply displaying the value property as the label.

In Filter: Showing Raw Value
Fork
  • This demo updates the Label to show the Raw value in the In Filter
  • We have added Display Formats of upper case to text Columns and 'K' to Github Stars - but all these columns show the raw value

Custom Labels

The label provided by AdapTable can easily be changed if required, to display custom text.

In Filter: Custom Label
Fork
  • This demo shows custom labels for the In filter
  • All values in the Language Column have a custom label, as does "React" in the Name column

Sorted Values

By default the values are listed in the order they appear in the Grid's DataSource.

But the function's context also contains a SortedValues property which will display values using any currently active Column Sorts (including Custom Sorts).

Note

This is not the same as using Column's current values' order (see below how to do that)

Hint

  • If there are multiple columns sorted, only the first column will display items in the same order as in the Grid
  • Other sorted Columns will display values according to the "natural" Sort Order (which may be different to the Grid)
In Filter: Sorted Values
Fork
  • This demo shows the In Filter displaying values based on the Sort Order defined in the Layout
    • The Name column has an Ascending Sort
    • The Language column has an Descending Sort
    • The Issue Change column has a Custom Sort applied
  • Note: Because Name is the first sorted column it displays in same order as Grid; the other 2 columns show the sort order as if they were the first sorted column

Ordered Values

As noted above, by default the values in the list are displayed in the order they appear in the Grid's DataSource, and we provide a SortedValues property which will leverage any currently active Column Sorts.

There is also an option to display values in the same order as they are currently displayed in the Grid.

This is done using the OrderedValues property, which will provide the order for any column (irrespective of whether it is currently sorted)

In Filter: Ordered Values
Fork
  • This demo shows the In Filter displaying values based on their Current Order
    • The Name column has a Column Sort - and the In filter list reflects that order
    • However other Columns (e.g. Issue Change and Github Watchers) display their current order (even though they are not sorted)
Try It Out
  • Change the Name column from an ascending to descending sort, and note how Issue Change and Github Watchers columns show their current (i.e. changed) order

Tooltip

It is possible to display a Tooltip in the In Filter if required.

All that is needed is to add tooltip to the return object, which can be done in 2 ways:

  • setting it to true - displays the label also as a tooltip
  • providing a custom string value to use as the tooltip

Hint

This allows you to provide a tooltip only if the value is more than a particular number of characters

In Filter: Showing a Tooltip
Fork
  • In this example we display a tooltip when using the In Filter
  • For string columns we show the standard tooltip, and for other columns we append the word 'VALUE' in the tooltip

Extra Predicates

The list of custom Column values can be supplemented by adding other Predicates.

All that is required is to add the name of the Predicate to the default list provided by the function.

Hint

Common use cases include adding Blanks Predicate, or Positive and Negative Predicates to number columns

In Filter: Adding System Predicates
Fork
  • This demo shows how to include System Predicates in the In Filter's list of values:
    • The Issue Change column adds 2 System Predicates: Positive and Negative
    • The Blanks and NonBlanks System Predicates are added to any column which contains empty values (e.g. Created or License) - with custom labels ("Empty" and "Not Empty") applied

Additionally the In Filter can display user-defined Custom Predicates.

In Filter: Adding Custom Predicates
Fork
  • This demo shows how to include Custom Predicates in the In Filter's list of values:
    • The Name column adds 2 Custom Predicates: Favourites and Non Favourites
    • The Github Stars column adds the Popular Custom Predicate

Date Columns

For Date columns, AdapTable switches to a Tree, rather than flat, structure.

This displays years, months and dates in order, allowing users to select larger groups of days (e.g a whole year).

Filtering on Time

By default AdapTable will not evaluate Column Filters using time.

The Tree will show a single date, and all entries in that 24 hour period will be displayed if the date is selected.

However time can be also be included when evaluating a Date Column Filter if that is required.

This is done by setting the evaluateInPredicateUsingTime property in Predicate Options to true.

Note

  • The property can return a simple boolean value to set time-based evaluation for all Date columns
  • Or, alernatively, developers can provide a function which will decide on a per-Column basis

When this happens, the Tree will show a separate item for each distinct time-related cell value in the column.

In Filter: Date Columns
Fork
  • In this example we have set all Date Columns to show the In Filter by default
  • We have provided a function implementation for the evaluateInPredicateUsingTime property in Predicate Options which returns true only for the Created column
Try It Out
  • Open the In Filter for the Created Column and navigate to 3 April 2009: note that 3 different time values are displayed, each of which can be selected separately
  • Open the In Filter for the Pushed Column and navigate to 19 May 2020: note that no different time values are displayed, but selecting that date results in 3 rows being displayed in the Grid

Suppressing Results Search

AdapTable automatically filters the displayed results in response to the user typing in the In Filter's search bar.

In other words typing 'b' will result in only values being displayed that contain 'b'.

This behaviour can be turned off so that AdapTable will do nothing if the user enters search text.

Hint

  • This is particularly useful if you wish to provide the Column values yourselves, bypassing AdapTable completely
  • You still receive the search term the user typed which you can leverage to refine your own internal algorithm

There are 2 frequent use cases where this might happen

  • The user is using the Server-Side Row Model or providing the list of items from the server for other reasons
  • The user wishes to perform a different way of searching the results, e.g. evaluating using "starts with"

Note

The Context for the function includes a currentSearchValue property which contains what was inputted by the user

In order to do this, the function's return object needs to include both properties:

  • the replacement values that should be displayed (in place of those that AdapTable would otherwise list)
  • the skipDefaultSearch property which should be set to true
In Filter: Suppressing Search
Fork
  • This example shows how to suppress search for the In Filter; we provide 2 rules for the Name column:
    • Typing '*' will provide a small list of the top 5 Frameworks
    • Typing in any other text will return those Frameworks which start with that letter
Try It Out
  • In the Name Column, type in '*' to see just 5 items; type in anything to see items that start with the search value

The NotIn Predicate

AdapTable also provides the NotIn Predicate.

This works in a very similar way to the In Predicate but, as the name implies, it excludes any selected values.

Not In Filter
Fork
  • This example contains 2 Columns Filters that use the NotIn Predicate:
    • The Name Column shows any value except for "React" or "Angular"
    • The Language Column shows any value except for "HTML"

Array Columns

AdapTable makes the In Filter the default Predicate for Array Columns.

Each distinct item in a cell's array is listed separately, and all rows which contain that item are displayed.

In Filter: Arrays
Fork
  • This example shows how AdapTable works with Array Columns in the In Filter.
  • We have 2 columns that contain Array values - Institutions and Awards - and both are supplied with Column Filters
Try It Out
  • Clear / edit the Column Filter for the Institutions and Awards columns

Performance Considerations

The In Filter is very powerful and offers great flexibility for users, enabling a huge range of use cases as can be seen above.

However this flexibility can come with a potential performance cost, especially in Grids with large data sets.

Caution

Use the customInFilterValues function with great care particularly in Columns with high numbers of distinct values

The following properties, in particular, can cause peformance issues if not used carefully:

  • visible and visibleCount - in both cases, each distinct value needs to be evaluated individually, which is particularly expensive when Row Grouping is active
  • orderedValues can be a very timely operation

Hint

  • AdapTable evaluates all these properties lazily (to ensure performance penalties are restricted to their actual use)
  • In other words, these properties are only evaluated if they are expressly invoked in the function implementation

Caching Results

To improve performance further, AdapTable caches each filter result, and then makes that available the next time the Column's In Filter is displayed, via the previousFilterResult property.

Note

AdapTable will destroy the cache if relevant things change (e.g. the column's data updates or a new sort is applied)

This allows you to first check if there is a cached result, and if there is, to display that.

Manually Applying Filters

Another option when using the In Filter with columns with a large numbers of records, is to turn on manually applying Column Filters.

When this property is set, the Filter is only evaluated when an Apply button is clicked, avoiding the list needing to be re-rendered on each click.

Find Out More

See Manually Applying Column Filters for more details

In Filter Performance
Fork
  • This contains 100,000 rows and 20 columns (the data is sourced externally so takes 5-8 seconds to fetch and load)
  • We have set the default Column Predicate to In for text, numeric and date columns
  • We have provided an "expensive" implementation of visible count (ie. we only list currently visible items together with a count)
  • However we first check to see if the values for the column are cached, and use that if they are
  • Finally we set manuallyApplyColumnFilter to true (for all columns) so that we only evaluate the Filter when the Apply button is clicked

Filter Component CSS

The In Filter component that appears in the Filter Bar can be configured using CSS.

Hint

This is particularly useful if you want to change the min or max width of the component

The main properties that can be set (and the default properties are):

  • --ab-cmp-select-menu__min-width - 150px;
  • --ab-cmp-select-menu__max-width - 60vw;
  • --ab-cmp-select-menu__max-height - 60vh;
  • --ab-cmp-select-menu__min-height - 25rem;
In Filter Custom CSS
Fork
  • In this demo we have changed 2 of the In Filter variables:
    • --ab-cmp-select-menu__min-width has been set to 100px (from default of 150), so it can become much narrower
    • --ab-cmp-select-menu__max-width has been set to 90vw (from default of 60), meaning it takes up most of screen if required

The In Column Filter

(Recorded with AdapTable v21.0)
PreviousFilter ComponentsNextSystem Filters