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

Sorting, JavaScript Programming Example of Sorting in SpreadSheet

JavaScript Programming Example of Sorting in SpreadSheet

Get a JavaScript programming example for sorting data in SpreadSheet. You are welcome to use free coding samples by Webix for building custom business web applications.

JS Code

webix.ready(function(){
  var buttons = {
    width:200, padding:10, margin:10,
    rows:[
      { view:"button", label: "Sort C3:C7",   click:function(){
        $$("ssheet").sortRange("C3:C7");
      }},
      { view:"button", label: "Sort selected: A to Z",  click: function(){
        $$("ssheet").sortRange(null,"asc");
      }},
      { view:"button", label: "Sort selected: Z to A",   click:function(){
        $$("ssheet").sortRange(null,"desc");
      }},
      {}
    ]
  };

  webix.ui({
    cols:[
      buttons,
      {
        view:"spreadsheet",
        id:"ssheet",
        toolbar: "full",
        data: base_data
      }
    ]
  });
});

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>