Spreadsheet toolbars

Jspreadsheet brings the basic options in the default toolbar, but it would be also possible to customize that options as shown in the following examples.


Default toolbar

The following example shows how to enable the default toolbar in the worksheet.

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/v7/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v7/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/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('spreadsheet1'), {
    minDimensions: [15,5],
    toolbar: true,
    allowComments: true,
    license: 'YjllZmE4NTNhODIzMWI0OWJiYmNlNGUwNzg2M2JkMmQxOGNjNjMxMmYwNjc3ZDkyOWViMGQ0ZmVmZGEzMzcyNGM4MWE4ZGY2Y2Y3M2Y1NzA2YWI5NmYxMDAxNGFiZjg4YzQ5N2Y0ZTA5MTNlNmEwOGNjY2Y1NzQ5MGQwYWU3NDMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3hNVGN3TkRZME9Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5',
});
</script>

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


Customized toolbar

It is possible to customize the toolbar using the initialization property toolbar as below.



Source code

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

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

<div id="spreadsheet2"></div>

<script>
var data2 = [
    ['Canada', 'Cheese', 1],
    ['Japan', 'Apples', 0],
    ['United States', 'Carrots', 1],
    ['China', 'Oranges', 0],
];

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: 'select',
            width: '50px',
            options: ['format_align_left','format_align_center','format_align_right','format_align_justify'],
            render: function(e) {
                return '<i class="material-icons">' + e + '</i>';
            },
            onchange: function(a,b,c,d) {
                if (d == 'format_align_left') {
                    table.setStyle(table.getSelected(), 'text-align', 'left');
                } else if (d == 'format_align_center') {
                    table.setStyle(table.getSelected(), 'text-align', 'center');
                } else if (d == 'format_align_right') {
                    table.setStyle(table.getSelected(), 'text-align', 'right');
                } else if (d == 'format_align_justify') {
                    table.setStyle(table.getSelected(), 'text-align', 'justify');
                }
            }
        },
        {
            type: 'i',
            content: 'format_bold',
            onclick: function(a,b,c) {
                table.setStyle(table.getSelected(), 'font-weight', 'bold');
            }
        },
        {
            type: 'i',
            content: 'format_color_text',
            onclick: function(element, instance, item) {
                if (! item.color) {
                    var colorPicker = jSuites.color(item, {
                        onchange:function(o, v) {
                            table.setStyle(table.getSelected(), 'color', v);
                        }
                    });
                    colorPicker.open();
                }
            }
        },
        {
            type: 'i',
            content: 'format_color_fill',
            onclick: function(element, instance, item) {
                if (! item.color) {
                    var colorPicker = jSuites.color(item, {
                        onchange:function(o, v) {
                            table.setStyle(table.getSelected(), 'background-color', v);
                        }
                    });
                    colorPicker.open();
                }
            }
        }
    ]
}

var table = jspreadsheet(document.getElementById('spreadsheet2'), {
    data: data2,
    columns: [
        {
            title: 'Country',
            type: 'autocomplete',
            source: ['Brazil','Canada','China','Japan','United States','United Kingdom'],
            width: '300px',
        },
        {
            title: 'Food',
            type: 'dropdown',
            source:['Apples','Bananas','Carrots','Oranges','Cheese'],
            width: '150px',
        },
        {
            title: 'Stock',
            type: 'checkbox',
            width: '100px',
        },
    ],
    toolbar: customToolbar,
    license: 'YjllZmE4NTNhODIzMWI0OWJiYmNlNGUwNzg2M2JkMmQxOGNjNjMxMmYwNjc3ZDkyOWViMGQ0ZmVmZGEzMzcyNGM4MWE4ZGY2Y2Y3M2Y1NzA2YWI5NmYxMDAxNGFiZjg4YzQ5N2Y0ZTA5MTNlNmEwOGNjY2Y1NzQ5MGQwYWU3NDMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3hNVGN3TkRZME9Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5',
});
</script>
</html>


Toolbar options

The following options define how jspreadsheet would render its toolbar.

NOTE: Same of the properties below are only available from jSuites v3.5.1+

PropertyDescription
type: stringElement type: i | icon | divisor | label | select | color
content: stringElement content, could be a text string or the icon (from material icons) when you use type: icon; click here for all possible keys
title: booleanTooltip for the toolbar element
width: numberToolbar element width
state: booleanAdd state controller to the toolbar element
active: booleanInitial state for the toolbar element
class: stringCSS Class for each toolbar element
optionsWhen type is select, this option would define the items of the dropdown.
value: numberThe initial selected option for the type: select
render: methodParse the items of type: select.
onclick: methodWhen a item is clicked
onchange: methodFor the type select when a new item is selected
k: string (deprected)means the style should be apply to the cell;
v: string (deprected)means the value of the style should be apply to the cell; When type:select, you can define an array of possibles values;

More about the jSuites toolbar