Back to Examples

Spreadsheet Toolbar

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.

<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="spreadsheet"></div>

<script>
let grid = jspreadsheet(document.getElementById('spreadsheet'), {
    minDimensions: [15,5],
    toolbar: true,
    allowComments: true,
    license: 'Mzg4OTUxNzNiZTkzMzkyZTc1YzU1MjMwZTcwNWE4Zjg3MGM4MDVhMjk5MzM5MGZkMTUwZjYwNjYwNTk4OTlmYjMxOGQ5MTljNDc0MmVlZGEzMGQwMWM1NWM2YTEzMTFjN2I5YmM0MWM1OTYxMzQyMmNhYzhhMTFjOTViYmVhYTQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFM01EUTNPVEU1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==',
});


document.getElementById("showbtn").onclick = () => grid.showToolbar();
document.getElementById("hidebtn").onclick = () => grid.hideToolbar();
</script>

<input type='button' value='Show Toolbar' id="showbtn">
<input type='button' value='Hide Toolbar' id="hidebtn">
</html>

Customized toolbar

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

<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="spreadsheet"></div>

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

let 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) {
                    let 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) {
                    let colorPicker = jSuites.color(item, {
                        onchange:function(o, v) {
                            table.setStyle(table.getSelected(), 'background-color', v);
                        }
                    });
                    colorPicker.open();
                }
            }
        }
    ]
}

let table = jspreadsheet(document.getElementById('spreadsheet'), {
    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: 'Mzg4OTUxNzNiZTkzMzkyZTc1YzU1MjMwZTcwNWE4Zjg3MGM4MDVhMjk5MzM5MGZkMTUwZjYwNjYwNTk4OTlmYjMxOGQ5MTljNDc0MmVlZGEzMGQwMWM1NWM2YTEzMTFjN2I5YmM0MWM1OTYxMzQyMmNhYzhhMTFjOTViYmVhYTQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFM01EUTNPVEU1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==',
});
</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+

Property Description
type: string Element type: i | icon | divisor | label | select | color
content: string Element content, could be a text string or the icon (from material icons) when you use type: icon; click here for all possible keys
title: boolean Tooltip for the toolbar element
width: number Toolbar element width
state: boolean Add state controller to the toolbar element
active: boolean Initial state for the toolbar element
class: string CSS Class for each toolbar element
options When type is select, this option would define the items of the dropdown.
value: number The initial selected option for the type: select
render: method Parse the items of type: select.
onclick: method When a item is clicked
onchange: method For 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