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

Home
Examples
Borders and Gridlines

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"]
          ]
        }
      }
    ]
  });
});

Would you like to get an effortlessly customizable spreadsheet?

Download Webix UI Framework

Study SpreadSheet Documentation

Check out SpreadSheet Widget Features