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.

There is an inline formula editor in Spreadsheet. It allows creating a new formula and edit the existing one in a cell. The editor is switched on by default. To switch it off set the liveEditor property to false.

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