Spreadsheet toolbar

Different from previous versions, there is one toolbar for multiple worksheets. The toolbar is disabled by default but can be easily included by using toolbar: true in the initial settings. The same property will be used to customize the toolbar as explained in this section.

Documentation

Methods

The following methods can be used to show, hide or customize the toolbar.
MethodDescription
getToolbar Get the toolbar current settings.
getToolbar() : Object
setToolbar Redefine the toolbar settings.
setToolbar(Object settings) : void
@param {Object} - Toolbar object, the allowed options are described in the table below.
showToolbar Show the toolbar using the current settings.
showToolbar() : void
hideToolbar Hide the toolbar.
hideToolbar() : void


Toolbar Object

It is possible to customize the toolbar items though the intialization using the following properties.
Property Description
Toolbar general properties
container: booleanShow the toolbar container border.
badge: booleanAdd the a badge container for each toolbar element.
title: booleanShow title below the icons.
responsive: booleanResponsive toolbar. Default: false
items: Array of toolbar itemItems for the toolbar.
Toolbar item properties
type: stringElement type: icon | divisor | label | select
content: stringContent of the toolbar element
title: booleanTooltip for the toolbar element
width: numberToolbar element width
active: booleanInitial state for the toolbar element
class: stringCSS Class for each toolbar element
value: numberThe initial selected option for the type: select
render: methodRender method parser for the elements in the dropdown when type: select
onclick: methodWhen a item is clicked
onchange: methodFor the type select when a new item is selected
updateState: FunctionCreate the item state controller.
updateState: function(toolbarElement: HTMLElement, toolbarInstance: Object, toolbarItem: HTMLElement, worksheet: Object) => void


Examples

Basic example with programatically toggle

The following example shows how to enable the default toolbar in the worksheet and use some methods to show or hide the toolbar after the initialization.

NOTE: Material icons style sheet is mandatory for the toolbar usage.


It is also possible to show or hide the custom toolbar using JavaScript.



Source code

<html>
<script src="https://jspreadsheet.com/v8/jspreadsheet.js"></script>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v8/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<link rel="stylesheet"
    type="text/css" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<div id="spreadsheet1"></div>

<script>
var grid = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [
        { minDimensions: [8,5] },
    ],
    toolbar: true,
});
</script>

<input type='button' value='Show Toolbar' onclick="grid[0].parent.showToolbar();">
<input type='button' value='Hide Toolbar' onclick="grid[0].parent.hideToolbar();">
</html>


Custom toolbar item

You can set the property toolbar as a function as below. That enables a new custom item in the default toolbar without recreating a new toolbar from stratch.



Source code

<html>
<script src="https://jspreadsheet.com/v8/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v8/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<div id="spreadsheet-2"></div>

<script>
jspreadsheet(document.getElementById('spreadsheet-2'), {
    toolbar: function(toolbar) {
        // Add a new custom item in the end of my toolbar
        toolbar.items.push({
            tooltip: 'My custom item',
            content: 'share',
            onclick: function() {
                alert('Custom click');
            }
        });

        return toolbar;
    },
    worksheets: [{
        minDimensions: [8,10],
    }]
});
</script>
</html>


Custom toolbar

Using the property toolbar it is possible to customize the items of the spreadsheet toolbar.



Source code

<html>
<script src="https://jspreadsheet.com/v8/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v8/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<div id="spreadsheet-3"></div>

<script>
var customToolbar = {
    items: [
        {
            content: 'save',
            onclick: function () {
                table.download();
            }
        },
        {
            type:'divisor',
        },
        {
            type:'select',
            width: '160px',
            options: [ 'Verdana', 'Arial', 'Courier New' ],
            render: function(e) {
                return '<span style="font-family:' + e + '">' + e + '</span>';
            },
            onchange: function(a,b,c,d) {
                table.setStyle(table.getSelected(), 'font-family', d);
            }
        },
        {
            type: 'i',
            content: 'format_bold',
            onclick: function(a,b,c) {
                table.setStyle(table.getSelected(), 'font-weight', 'bold');
            }
        },
        {
            type: 'i',
            content: 'format_italic',
            onclick: function(a,b,c) {
                table.setStyle(table.getSelected(), 'font-style', 'italic');
            }
        },
        {
            content: 'search',
            onclick: function(a,b,c) {
                if (c.children[0].innerText == 'search') {
                    Search.show.call(jspreadsheet.current);
                    c.children[0].innerText = 'search_off';
                } else {
                    Search.hide.call(jspreadsheet.current);
                    c.children[0].innerText = 'search';
                }
            },
            tooltip: 'Toggle Search',
            updateState: function(a,b,c,worksheet) {
                // Call this one when the worksheet is opened and on the selection of any cells
                if (worksheet.options.search == true) {
                    c.children[0].innerText = 'search_off';
                } else {
                    c.children[0].innerText = 'search';
                }
            }
        }
    ]
}

jspreadsheet(document.getElementById('spreadsheet-3'), {
    worksheets: [{
        minDimensions: [8,10],
    }]
    toolbar: customToolbar
});
</script>
</html>