NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

Custom Filters in TreeTable
JavaScript Programming Examples of Custome Filters in TreeTable

JavaScript Custom Filters in TreeTable

Get the programming example for custom filters in a TreeTable. The TreeTable is a great component for facilitating data management. Webix coding sample below allows creating convenient search by the folder or file name with "in progress" and "planning" items. Feel free to use our code sample for building your own great web apps.

JS Code

/*
  You can provide custom filtering logic. 
  In this sample the data are filtered by text start, preserving in-progress items.
*/

function treeCompare1(test, value, obj){ 
  if (obj.state == 'in progress') return true; //always show in-progress items
  //filter by start
  if (test.toString().toLowerCase().indexOf(value.toLowerCase()) == 0) return true;
  return false;
};

var grida = {
  view:"treetable",
  columns:[
    { id:"id", header:"", css:{"text-align":"right"}, width:50 },
    { id:"value", header:["Title",{content:"textFilter", compare:treeCompare1 }], fillspace:true,
     template:"{common.treetable()} #value#" },
    { id:"state", header:"State", width:100 },
    { id:"hours", header:"Hours", width:100 }
  ],
  filterMode:{
    level:1
  },
  autoheight:true,
  scroll:false,
  url:"https://docs.webix.com/samples/server/projects"
};

webix.ready(function(){
  webix.ui({
    rows:[
      grida,
      {}
    ]
  });
});