General Configuration Settings

The SpreadSheet component can be easily configured according to your needs. You can enable work with math operations, cells resizing, specify the exact number of rows and columns in the spreadsheet.

Enabling formula editor

You can add an inline editor of formulas in Spreadsheet. It allows creating a new formula and edit the existing one in a cell.

There's the liveEditor property in the Spreadsheet API that will let you to switch the editor on. You just need to set it to true in the config.

webix.ui({
    view: "spreadsheet",
    data: base_data,
    liveEditor: true
});

You can find a more detailed description of the editor in the corresponding section.

Setting the count of rows and columns

If you need to specify a certain number of columns or rows in the SpreadSheet, make use of the columnCount and rowCount properties.

webix.ui({
    view:"spreadsheet",
    data: base_data,
    // setting the number of columns
    columnCount:10,
    // setting the number of rows
    rowCount:20
});

Related sample:  Reset Spreadsheet

Adding subbar

To show some additional elements/views into Spreadsheet, you can use the subbar property. It allows adding views below the toolbar, but above the datatable.

Inside of the subbar property you can define a view, e.g. toolbar, apply some CSS to it and specify the elements that will be shown in the view.

webix.ui({
    view:"spreadsheet",
    data: base_data,        
    subbar:{
        view:"toolbar", css:"webix_ssheet_toolbar", 
        elements:[
            { view:'label', template:"Custom cell editor: ", width:190},
            { view:'text', id:'text', width:250 },
            {}
        ]
    },  
});

Related sample:  Subbar

Making SpreadSheet readonly

To activate the readonly mode, you need to set the readonly property to true in the SpreadSheet configuration:

webix.ui({
    view:"spreadsheet",
    data: base_data,
    readonly:true
});

From now on, users won't be able to manipulate the cells. The Instruments panel and the subbar will be hidden.

Related sample:  ReadOnly

Adding Menu

You can add a dropdown menu at the top of SpreadSheet. It allows saving space on the toolbar and leave just the most prominent buttons on it.

To add a menu, make use of the menu property with the true value.

webix.ui({
    view:"spreadsheet",
    data: math_data_simple,
    menu: true
});

Related sample:  Menu

Back to top
If you have not checked yet, be sure to visit site of our main product Webix ui widget library and page of web spreadsheet product.