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

Borders and Gridlines, JavaScript Programming Example of Borders and Gridlines in SpreadSheet

JavaScript Programming Example of Borders and Gridlines in SpreadSheet

You can easily customize Webix SpreadSheet. The coding sample below shows how you can add buttons which allow users to hide headers and gridlines of the table. All coding samples in this section are free.

JS Code

webix.ready(function(){
  var buttons = {
    padding:4, margin:4,
    cols:[
      { view:"toggle", width:200, onLabel: "Show gridlines", offLabel: "Hide gridlines",  on:{
        onChange: function(value){
          $$("ssheet").hideGridlines(value);
        }
      }},
      { view:"toggle", width:200, onLabel: "Show headers", offLabel: "Hide headers",  on:{
        onChange: function(value){
          $$("ssheet").hideHeaders(value);
        }
      }},
      {}
    ]
  };
  webix.ui({
    rows:[
      buttons,
      {
        view:"spreadsheet",
        id:"ssheet",
        toolbar: "full",
        data:{
          data:[
            [3,2,"Webix"],
            [3,3,"SpreadSheet"]
          ]
        }
      }
    ]
  });
});