The library provides ability to filter data on the client side by one or several criteria using built-in or custom filters.
You can define a built-in filter in the header or footer of a column. Webix offers various filter types:
All of them are described in detail below.
A built-in filter is set by the content property of the header/footer attribute. Note that to add a filter to the header (footer), the header (footer) must be specified as an array.
columns:[
{ id:"title", header:[{content:"{filtername}Filter"}, "Title"] }
]
If you need to create a custom filter (or something) for header content, or you need to redefine the behavior of an already existing filter, go here for the instructions.
This functionality is available for Pro filters only.
You can configure the input that is used in the table's header for filtering - richselect, datepicker, etc. For this purpose, you need to use the inputConfig property.
For example, you can enable the tagMode feature for the multiComboFilter as follows:
{
id:"year",
header:[
"Released", {
content:"multiComboFilter", inputConfig:{ tagMode:true }
}
]
}
By default, the options for a selection filter (selectFilter, richSelectFilter, multiSelectFilter, multiComboFilter, and their server counterparts) are taken:
You can set collection/options in several ways just like for columns, and regardless of the way the options will be stored in a DataCollection.
{
id:"year", header:[
"Released", {
content:"selectFilter", options:data_collection
}
]
},
{
id:"title", options:local_array, header:[
"Film title", {
content:"multiSelectFilter", options:"server/films/"
}
]
}
If there is a collection for the column, but you want the filter to take its options from the column values, you can add an additional configuration property to the filter:
{
id:"year", options:data_collection,
header:[
"Released", {
content:"selectFilter", collect:{ visible:true }
}
]
}
Related sample: Datatable: Option collections for columns, filters and editors
Retrieves values that contain mask defined through text field.
{ id:"title", header:[ "Film title",{ content:"textFilter" }] }
Related sample: Filtering. Built-in Text Filter and Select Filter
A text filter that works with backend. Retrieves values that contain mask defined through text field and sends a request to server to return filtered dataset.
{ id:"title", header:["Film title", {content:"serverFilter"}] }
Related sample: Datatable: Serverside Filtering and Sorting
Request parameters include:
If server-side sorting is enabled, data is both filtered and sorted on server.
Retrieves values that contain mask defined through a dropdown list of possible values. Based on a standard HTML select input.
{ id:"title", header:["Film title",{content:"selectFilter"}] }
Related sample: Filtering. Built-in Text Filter and Select Filter
A select filter that works with backend. Retrieves values defined through a dropdown list of possible values and sends a request to server to return filtered dataset.
{ id:"title",header:["Film title", {content:"serverSelectFilter"}] }
Request parameters include:
If server-side sorting is enabled, data is both filtered and sorted on server.
Text filter used for number columns. Retrieves values which contain mask defined through text field. Allows users to use the following comparison operators in it:
{ id:"year", header:["Released",{content:"numberFilter"}] }
Related sample: Filtering. Built-in Numeric Filter
A text filter used for date columns. Retrieves values that contain mask defined through text field. Allows users to use the following comparison operators in it:
There are 3 ways you can input data to the dateFilter:
{ id:"year", header:[ "Released",{ content:"dateFilter"}],
format:webix.i18n.dateFormatStr}
Related sample: Filtering. Built-in Date Filter
Available in Webix Pro edition only.
Retrieves values that contain mask defined through a popup list of possible values. Based on Webix richselect control.
{ id:"year", header:["Released", { content:"richSelectFilter" }]}
Related sample: Multi-Select Filter in DataTable
Available in Webix Pro edition only.
Retrieves values that contain mask defined through a popup list of possible values. Sends a request to a server to return a filtered dataset.
{ id:"year",header:["Released", { content:"serverRichSelectFilter" }]}
Request parameters include:
If server-side sorting is enabled, data is both filtered and sorted on a server.
Available in Webix Pro edition only.
Retrieves values that contain mask defined through a popup list of possible values while multiple values can be selected at once. Based on Webix multiselect control.
{ id:"year",header:["Released", { content:"multiSelectFilter" }]}
Related sample: Multi-Select Filter in DataTable
Available in Webix Pro edition only.
Retrieves values that contain mask defined through a popup list of possible values while multiple values can be selected at once. Sends a request to a server to return a filtered dataset.
{ id:"year",header:["Released", { content:"serverMultiSelectFilter" }]}
Request parameters include:
If server-side sorting is enabled, data is both filtered and sorted on server.
Available in Webix Pro edition only.
Retrieves values that contain mask defined through a popup list of possible values while multiple values can be selected at once. Based on Webix multicombo control.
{ id:"year", header:["Released", { content:"multiComboFilter" }] }
By default, the tagMode configuration property for this filter is disabled, i.e. the control shows only the number of the selected options.
You can enable the tagMode for the filter inside of the inputConfig property of the header configuration:
{
id:"year",
header:["Released", { content:"multiComboFilter", inputConfig:{tagMode:true} }]
}
Available in Webix Pro edition only.
Retrieves values that contain mask defined through a popup list of possible values while multiple values can be selected at once. Sends a request to a server to return a filtered dataset.
{ id:"year",header:["Released", { content:"serverMultiComboFilter" }]}
Request parameters include:
If server-side sorting is enabled, data is both filtered and sorted on a server.
Available in Webix Pro edition only.
Compares the entered value with values in a column and retrieves exact matches (works with Date objects only). Based on the Webix DatePicker control.
{ id:"date", header:[ "Released", { content:"datepickerFilter" }],
format:webix.i18n.dateFormatStr}
Related sample: Date filters in the DataTable
Available in Webix Pro edition only.
Retrieves values that contain mask defined through the range defined in the popup calendar. Based on Webix daterangepicker control.
{ id:"date", header:["Deadline", { content:"dateRangeFilter"}],
format:webix.i18n.dateFormatStr, width:200}
Related sample: Date-Range Filter in the DataTable
Available in Webix Pro edition only.
A daterange filter that works with backend. Retrieves values defined through the range set in the popup calendar and sends a request to a server to return a filtered dataset.
{ id:"title", header:["Film title", {content:"serverDateRangeFilter"}],
format:webix.i18n.dateFormatStr, width:200}}
Request parameters include:
If server-side sorting is enabled, data is both filtered and sorted on server.
Note that each time you start to type text in such a filter, DataTable invokes the filterByAll method. Each time the method is called, all data is re-filtered (previous results aren't preserved).
By default, when you specify filters in several columns, DataTable applies AND logic to them, i.e. the table will display only the records that meet all criteria at once.
Related sample: Filtering by Several Criteria (AND Logic)
In case you want to apply OR logic (to display records that meet at least one of criteria) you should redefine the filterByAll() method. For example, it can look like this:
Implementing OR logic for filters
webix.ui({
id:"grid",
view:"datatable",
columns:[
{ id:"title", header:["Film title", {content:"textFilter"}] },
{ id:"year", header:["Released", {content:"selectFilter"}] },
{ id:"votes", header:"Votes" }
]
});
$$("grid").filterByAll = function(){
//gets filter values
var title = this.getFilter("title").value;
var year = this.getFilter("year").value;
//unfilters the table if values were not selected
if (!title && !year) return this.filter();
//filters using OR logic
this.filter(function(obj){
if (obj.year == year) return true;
if (obj.title.toLowerCase().indexOf(title)!=-1) return true;
return false;
});
};
Related sample: Filtering by Several Criteria (OR Logic)
You can modify the default filtering pattern by creating a custom function and setting the compare property of the header(footer) attribute to this function.
A custom function specified as a filtering rule takes 2 parameters:
For example, to make DataTable filtered just by the start letter of column values, you may specify the filtering rule as shown below:
Filtering by the start letter of the column values
function startCompare(value, filter){
value = value.toString().toLowerCase();
filter = filter.toString().toLowerCase();
return value.indexOf(filter) === 0;
}
webix.ui({
view:"datatable",
columns:[
{
id:"title",
header:["Film title",{content:"textFilter",compare:startCompare}]
}
]
});
Related sample: Using Different Filtering Rules
Filtering values can be preprocessed inside a custom function set as a value of the prepare property of the header(footer) attribute. This function should take two parameters:
webix.ui({
view:"datatable",
columns:[
{
id:"title",
header:["Film title",{
content:"textFilter",
prepare:function(filterValue, filterObject){
return filterValue;
},
compare:function(cellValue, filterValue){
return cellValue == filterValue;
}
}]
}
]
});
There is a possibility to filter DataTable by different columns using one input for this.
This can be done by:
Filtering by multiple criteria (by using method filterByAll)
webix.ui({
id:"grid",
view:"datatable",
columns:[
{ id:"rank", header:["#", { content:"textFilter", colspan:3}] },
{ id:"title", header:["Film title",""] },
{ id:"year", header:["Released",""] },
]
});
$$("grid").filterByAll = function(){
//gets filter values
var text = this.getFilter("rank").value.toString().toLowerCase();
//unfilters for empty search text
if (!text) return this.filter();
//filters using OR logic
this.filter(function(obj){
if (obj.year == text) return true;
if (obj.title.toLowerCase().indexOf(text)!=-1) return true;
return false;
});
};
Related sample: Filtering by Multiple Criteria Entered via One Input
Filtering by multiple criteria (by specifying an additional filtering rule)
grid = webix.ui({
view:"datatable",
columns:[
{
id:"rank",
header:["#",{content:"textFilter",compare:oneForAll,colspan:3}]
},
{ id:"title", header:["Film title",""]},
{ id:"year", header:["Release year",""]}
]
});
function oneForAll(value, filter, obj){
if (obj.year.toString().toLowerCase().indexOf(filter) !== -1;) return true;
if (obj.title.toLowerCase().indexOf(text)!=-1) return true;
return false;
};
Related sample: Custom Filtering by Multiple Criteria Entered via One Input
Setting a Custom Filter
<input type="text" id='myfilter'> //input
~~~js grid = webix.ui({ // component view:"datatable", columns:[ {id:"title", ...} ] });
grid.registerFilter(document.getElementById("myfilter"), { columnId:"title" }, //column to filter { getValue:function(node){ return node.value; }, setValue:function(node, value){ node.value = value; } } );
<a href='https://snippet.webix.com/4142ab05' target='blank'><span class='sample'>Related sample: </span> Filtering by Multiple Criteria</a>
###Custom Filtering with the filter() method
In addition, the library gives you the [filter()](api/link/ui.datatable_filter.md) method to provide fully custom filtering.
For example, if you add an input and a button to the page and want to filter DataTable by clicking on it, your code may look like this:
<p class='snippet'>
Implementing a custom filter
</p>
~~~js
<input type="text"><input type="button" value='filter'
onclick='filterText(this);'>
<script>
function filterText(node){
var text = node.previousSibling.value;
if (!text) return grid.filter();
grid.filter(function(obj){ // grid is a dataTable instance
return obj.year == text;
})
}
</script>
Related sample: Filtering via a Separate Input Element
Note, in the DataTable constructor you need to specify no parameters.
Datatable API allows searching for the needed records easily with the help of its find method.
Unlike filtering, it preserves the records visible but returns an array of rows that match the given criterion for further usage.
For instance, it allows highlighting the filtered data:
//res - array of found rows
var res = table.find(function(obj){
return obj.title.toLowerCase().indexOf(value) != -1;
});
table.clearCss("marker", true)
for (var i = 0; i < res.length; i++)
table.addCss(res[i].id, "marker", true);
table.refresh();
In case of TreeTable some extra configurations can be defined to define how filters will be applied.
The filterMode property is an object that can contain 2 attributes:
Using the filterMode parameter
webix.ui({
view:"treetable",
filterMode:{
showSubItems:false,
level:2
}
});
Back to top