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

A built-in filter is set by the content property of the header/footer attribute. Note, 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.

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

ServerRichSelect Filter

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:

  • 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 a server.

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

Datepicker Filter

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

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 a server to return a 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 = 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

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:

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

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

Preparing values for filtering

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:

  1. filterValue - the value entered in the filter;
  2. filterObject - the object of the filter.
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 }
        }]
     }
   ]
});

Filtering by multiple criteria entered via one input

There is a 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 = 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 = 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 a datatable filter

Setting a Custom Filter

<input type="text" id='myfilter'> //input
 
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;
        }
    }
);

Related sample:  Filtering by Multiple Criteria

Custom Filtering with the filter() method

In addition, the library gives you the filter() 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:

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

Back to top
If you have not checked yet, be sure to visit site of our main product Webix javascript framework and page of download datatable product.