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

Filtering, JavaScript Programming Example of Filtering in SpreadSheet

JavaScript Programming Example of Filtering in SpreadSheet

If you want to set a filter inside of a cell in SpreadSheet, use the piece of code below. Don't miss the opportunity to download free programming examples by Webix to speed up the process of web development.

JS Code

webix.ready(function(){
  webix.ui({
    view:"spreadsheet",
    id:"ssheet",
    toolbar: "full",
    data: base_data
  });

  $$("ssheet").setCellFilter(2,1, ["", "Europe", "Asia", "America"] );
  $$("ssheet").setCellFilter(2,2, "B3:B7");
});

HTML Code

<script>
  var base_data = {
  "styles": [
	["top","#FFEFEF;#6E6EFF;center;'PT Sans', Tahoma;17px;"],						
	["subtop","#818181;#EAEAEA;center;'PT Sans', Tahoma;15px;;;bold;;;"],
	["sales","#818181;;center;'PT Sans', Tahoma;15px;;;bold;;;"],
	["total","#818181;;right;'PT Sans', Tahoma;15px;;;bold;;;"],
	["count","#818181;#EAEAEA;center;'PT Sans', Tahoma;15px;;;;;;"],
	["calc-top","#818181;#EAEAEA;;'PT Sans', Tahoma;15px;;;bold;;;"],
	["calc-other","#818181;#EAEAEA;;'PT Sans', Tahoma;15px;;;bold;;;"],
	["values","#000;#fff;right;'PT Sans', Tahoma;15px;;;;;;;price"]
  ],
  "sizes": [
    [0,1,125],
    [0,3,137],
    [0,4,137],
	[0,5,137]
  ],
  "data": [
    [1,1,"Report - July 2016","top"],    
    [2,1,"Region","subtop"],
    [2,2,"Country","subtop"],
    [2,3,"Sales - Group A","sales"],
    [2,4,"Sales - Group B","sales"],
    [2,5,"Total","total"],
    [3,1,"Europe","count"],
    [3,2,"Germany","count"],
    [3,3,"188400","values"],
    [3,4,"52000","values"],
    [3,5,"=C3+D3","values"],
    [4,1,"Europe","count"],
    [4,2,"France","count"],
    [4,3,"192200","values"],
    [4,4,"12000","values"],
    [4,5,"=C4+D4","values"],
    [5,1,"Europe","count"],
    [5,2,"Poland","count"],
    [5,3,"68900","values"],
    [5,4,"8000","values"],
    [5,5,"=C5+D5","values"],
    [6,1,"Asia","count"],
    [6,2,"Japan","count"],
    [6,3,"140000","values"],
    [6,4,"14000","values"],
    [6,5,"=C6+D6","values"],
    [7,1,"Asia","count"],
    [7,2,"China","count"],
    [7,3,"50000","values"],
    [7,4,"4800","values"],
    [7,5,"=C7+D7","values"]
  ],
  "spans": [
    [1,1,5,1]
  ]
};
</script>