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.

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 switch the editor on. You just need to set it to true in the configuration object.

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

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

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

To show some additional elements/views into Spreadsheet, you can use the subbar property. It allows adding views between the toolbar and 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

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

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 set to true.

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

Related sample:  Menu