DataTable Filtering

The library provides ability to filter data on the client side by one criterion or several criteria using built-in or custom filters.

Filters in the header

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.

Setting and Configuring Filter

Setting a filter

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 something) for header content, or you need to redefine the behavior of an already existing filter, go here for the instructions.

Configuring filters

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} }]
}

Filters Description

Text filter

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

Server 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:

  • count - the number of data records to return. Its value depends on dynamic loading parameters, if any;
  • start - ID of the data record to start from (0 - beginning). Its value depends on dynamic loading parameters, if any;
  • filter[column_name] - name of the column (in brackets) for which filtering is performed. Its value is a text value you've entered in the filter input.

If server-side sorting is enabled, data is both filtered and sorted on server.

Select filter

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

ServerSelect 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:

  • count - the number of data records to return. Its value depends on dynamic loading parameters, if any;
  • start - ID of the data record to start from (0 - beginning). Its value depends on dynamic loading parameters, if any;
  • filter[column_name] - name of the column (in brackets) for which filtering is performed. Its value is a text value you've selected in the filter input.

If server-side sorting is enabled, data is both filtered and sorted on server.

Number filter

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:

  • '=' - equal to;
  • '>' - greater than;
  • '<' - less than;
  • '<=' - less or equal;
  • '>=' - greater or equal.
{ id:"year", header:["Released",{content:"numberFilter"}] }

Related sample:  Filtering. Built-in Numeric Filter

Date 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:

  • '>' - greater than;
  • '<' - less than;
  • '<=' - less or equal;
  • '>=' - greater or equal.

There are 3 ways you can input data to the dateFilter:

  1. 'yyyy' - 4-digits year;
  2. 'mm.yyyy' - 2-digits month and 4-digits year separated by point;
  3. 'dd.mm.yyyy' - 2-digits day, 2-digits month and 4-digits year separated by points
{ id:"year", header:[ "Released",{ content:"dateFilter"}], 
    format:webix.i18n.dateFormatStr}

Related sample:  Filtering. Built-in Date Filter

Richselect 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

Multiselect Filter

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 the DataTable

ServerMultiSelect Filter

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 server to return filtered dataset.

{ id:"year",header:["Released", { content:"serverMultiSelectFilter" }]}

Request parameters include:

  • count - the number of data records to return. Its value depends on dynamic loading parameters, if any;
  • start - ID of the data record to start from (0 - beginning). Its value depends on dynamic loading parameters, if any;
  • filter[column_name] - name of the column (in brackets) for which filtering is performed. Its value is a text value you've selected in the filter input.

If server-side sorting is enabled, data is both filtered and sorted on server.

Multicombo Filter

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} }]
}

ServerMultiCombo Filter

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 server to return filtered dataset.

{ id:"year",header:["Released", { content:"serverMultiComboFilter" }]}

Request parameters include:

  • count - the number of data records to return. Its value depends on dynamic loading parameters, if any;
  • start - ID of the data record to start from (0 - beginning). Its value depends on dynamic loading parameters, if any;
  • filter[column_name] - name of the column (in brackets) for which filtering is performed. Its value is a text value you've selected in the filter input.

If server-side sorting is enabled, data is both filtered and sorted on server.

Datepicker Filter

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

Daterange Filter

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

ServerDateRange Filter

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 server to return filtered dataset.

{ id:"title", header:["Film title", {content:"serverDateRangeFilter"}],
    format:webix.i18n.dateFormatStr, width:200}}

Request parameters include:

  • count - the number of data records to return. Its value depends on dynamic loading parameters, if any;
  • start - ID of the data record to start from (0 - beginning). Its value depends on dynamic loading parameters, if any;
  • filter[column_name] - name of the column (in brackets) for which filtering is performed. Its value is a JSON string formed out of the value you have entered in the daterange picker.

If server-side sorting is enabled, data is both filtered and sorted on server.

Filtering Logic

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).

AND logic

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)

OR 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)

Custom filtering rules

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:

  1. value - a column value (the function checks values by turn);
  2. filter - the entered in the filter value.

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

Filtering by multiple criteria entered via one input

There is the possibility to filter DataTable by different columns using one input for this.

This can be done by:

  1. Redefining method filterByAll();
  2. Specifying an additional filtering rule.

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

HTML inputs as filters for DataTable

Setting an HTML input as datatable filter

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

Custom Filtering with filter() method

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.

Find API

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();

Related sample:  "Find" API

TreeTable specific configuration

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:

  • showSubItems - (boolean) defines whether the tree must display children of the filtered items (true) or the filtered items would be displayed as children of the root node (false). The default value - true.
  • openParents - (boolean) defines whether the tree will expand branches to show the found items (true) or stay as is (false). The default value - true
  • level - (number) sets the nesting level to filter items from (one-based numbering).

Using the filterMode parameter

webix.ui({
    view:"treetable", 
    filterMode:{
        showSubItems:false,
        level:2
    }
});

Related sample:  Filtering

Back to top