The library provides ability to filter data on client-side by one or several criteria using for this built-in or customly created filters.
You can define a built-in filter in the header or footer of a column. Webix offers 8 filter types:
All of them are described in detail below.
Built-in filter is set by property content of the header/footer attribute. Note, to add a filter to the header(footer), the header(footer) must be specified as array.
columns:[
{ id:"title", header:[{content:"{filtername}Filter"}, "Title"] }
]
If you need to create a custom filter (or smth) for header content, or you need to redefine the behaviour of an already existing filter, go here for the instructions.
Retrieves values that contain mask defined through text field.
{ id:"title",header:[ "Film title",{content:"textFilter"}] }
Related sample: Filtering. Built-in Text Filter, 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 serverside 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, Select Filter
Text filter used for number columns. Retrieves values which contain mask defined through text field. Allows users to use the following comporison 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 comporison 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 the DataTable
Available in Webix Pro edition only.
Retrieves values that contain mask defined through a popup list of possible values while miltiple values can be selected at once. Based on Webix multiselect control.
{ id:"year",header:["Released", { content:"multiSelectFilter" }]
Related sample: Multi-select filter in the DataTable
Available in Webix Pro edition only.
Retrieves values that contain mask defined through the popup calendar. Based on Webix datepicker control.
{ id:"date", header:[ "Released", { content:"datepickerFilter" }],
format:webix.i18n.dateFormatStr}
Related sample: Date filters in the DataTable
Note, 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 just 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
grid = new webix.ui({
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)
A filter is a set of filtering rules applied to specific content. When you specify a filter you have the possibility to set additional filtering rules for it. To set additional filtering rule for the filter you must create a custom function implementing those rule and set property compare of the header(footer) attribute to this function.
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 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;
}
grid = new webix.ui({
view:"datatable",
...
columns:[
{ id:"title", header:["Film title",{content:"textFilter", compare:startCompare}]},
...
]
});
Related sample: Using different filtering rules
There is the 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)
grid = new webix.ui({
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 = new 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
grid = new 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;
}
});
Related sample: Filtering by multiple criteria
In addition, the library gives you method filter() to provide fully custom filtering.
For example, if you add an input and button to the page and want to filter DataTable by clicking on it, you code may look like this:
Implementing a custom filter
<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