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

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({
    padding:10, rows:[
      {
        height:70,
        template:"<b>Custom filters in TreeTable</b><br><br>Filter by text start, preserves in-progress items"
      },
      grida,
      {}
    ]
  });
});