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: {
      "styles": [
        ["top","#FFEFEF;#6E6EFF;center;'PT Sans', Tahoma;17px;"]
      ],
      "data": [
        [1,1,"Report - July 2016","top"],
        [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]
      ]
    }
  });

  $$("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>