The plugin allows filtering the table data either by the built-in component or with the API.
See the filtering demo for examples.
Example
const container = document.getElementById('example');
const hot = new Handsontable(container, {
data: getData(),
colHeaders: true,
rowHeaders: true,
dropdownMenu: true,
filters: true
});
Classes
Methods
-
addCondition(column, name, args, operationId)
-
Adds condition to the conditions collection at specified column index.
Possible predefined conditions:
begins_with
- Begins withbetween
- Betweenby_value
- By valuecontains
- Containsempty
- Emptyends_with
- Ends witheq
- Equalgt
- Greater thangte
- Greater than or equallt
- Less thanlte
- Less than or equalnone
- None (no filter)not_between
- Not betweennot_contains
- Not containsnot_empty
- Not emptyneq
- Not equal.
Possible operations on collection of conditions:
conjunction
- Conjunction on conditions collection (by default), i.e. for such operation: c1 AND c2 AND c3 AND c4 ... AND cn === TRUE, where c1 ... cn are conditions.disjunction
- Disjunction on conditions collection, i.e. for such operation:c1 OR c2 OR c3 OR c4 ... OR cn
=== TRUE, where c1, c2, c3, c4 ... cn are conditions.disjunctionWithExtraCondition
- Disjunction on firstn - 1
* conditions from collection with an extra requirement computed from the last condition, i.e. for such operation:c1 OR c2 OR c3 OR c4 ... OR cn-1 AND cn
=== TRUE, where c1, c2, c3, c4 ... cn are conditions.
* when
n
is collection size; it's used i.e. for one operation introduced from UI (when choosing from filter's drop-down menu two conditions with OR operator between them, mixed with choosing values from the multiple choice select)Note: Mind that you cannot mix different types of operations (for instance, if you use
conjunction
, use it consequently for a particular column).Parameters:
Name Type Default Description column
number Visual column index.
name
string Condition short name.
args
Array Condition arguments.
operationId
string conjunction optional id
of operation which is performed on the column.Example
const container = document.getElementById('example'); const hot = new Handsontable(container, { data: getData(), filters: true }); // access to filters plugin instance const filtersPlugin = hot.getPlugin('filters'); // add filter "Greater than" 95 to column at index 1 filtersPlugin.addCondition(1, 'gt', [95]); filtersPlugin.filter(); // add filter "By value" to column at index 1 // in this case all value's that don't match will be filtered. filtersPlugin.addCondition(1, 'by_value', [['ing', 'ed', 'as', 'on']]); filtersPlugin.filter(); // add filter "Begins with" with value "de" AND "Not contains" with value "ing" filtersPlugin.addCondition(1, 'begins_with', ['de'], 'conjunction'); filtersPlugin.addCondition(1, 'not_contains', ['ing'], 'conjunction'); filtersPlugin.filter(); // add filter "Begins with" with value "de" OR "Not contains" with value "ing" filtersPlugin.addCondition(1, 'begins_with', ['de'], 'disjunction'); filtersPlugin.addCondition(1, 'not_contains', ['ing'], 'disjunction'); filtersPlugin.filter();
-
clearConditions(column)
-
Clears all conditions previously added to the collection for the specified column index or, if the column index
was not passed, clear the conditions for all columns.Parameters:
Name Type Description column
number optional Visual column index.
-
destroy()
-
Destroys the plugin instance.
-
disablePlugin()
-
Disables the plugin functionality for this Handsontable instance.
-
enablePlugin()
-
Enables the plugin functionality for this Handsontable instance.
-
filter()
-
Filters data based on added filter conditions.
Fires:
-
getDataMapAtColumn(column){Array}
-
Returns handsontable source data with cell meta based on current selection.
Parameters:
Name Type Description column
number optional The physical column index. By default column index accept the value of the selected column.
Returns: {Array} Returns array of objects where keys as row index.
-
getSelectedColumn(){object|null}
-
Gets last selected column index.
Returns: {object|null} Return
null
when column isn't selected otherwise
object containing information about selected column with keysvisualIndex
andphysicalIndex
. -
isEnabled(){boolean}
-
Checks if the plugin is enabled in the handsontable settings. This method is executed in
Hooks#beforeInit
hook and if it returnstrue
than theFilters#enablePlugin
method is called.Returns: {boolean}
-
removeConditions(column)
-
Removes conditions at specified column index.
Parameters:
Name Type Description column
number Visual column index.