Custom toolbars
The following example shows how to include and customize a toolbar in your javascript spreadsheet.
Instructions
The toolbar can be customized with a few parameters.type | could be i for icon, select for a dropdown, color or a colorpicker. |
content | defines the icon (from material icons) when you use type:i; click here for all possible keys |
k | means the style should be apply to the cell; |
v | means the value of the style should be apply to the cell; When type:select, you can define an array of possibles values; |
onclick | can be used together with type:i to implement any custom method. The method will receive the jspreadsheet instance and all marked cells by default. |
Source code
<html> <script src="https://bossanova.uk/jspreadsheet/v3/jexcel.js"></script> <script src="https://jsuites.net/v3/jsuites.js"></script> <link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v3/jexcel.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v3/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> data = [ ['Canada', 'Cheese', 1], ['Japan', 'Apples', 0], ['United States', 'Carrots', 1], ['China', 'Oranges', 0], ]; table = jexcel(document.getElementById('spreadsheet'), { data:data, 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:[ { type: 'i', content: 'undo', onclick: function() { table.undo(); } }, { type: 'i', content: 'redo', onclick: function() { table.redo(); } }, { type: 'i', content: 'save', onclick: function () { table.download(); } }, { type: 'select', k: 'font-family', v: ['Arial','Verdana'] }, { type: 'select', k: 'font-size', v: ['9px','10px','11px','12px','13px','14px','15px','16px','17px','18px','19px','20px'] }, { type: 'i', content: 'format_align_left', k: 'text-align', v: 'left' }, { type:'i', content:'format_align_center', k:'text-align', v:'center' }, { type: 'i', content: 'format_align_right', k: 'text-align', v: 'right' }, { type: 'i', content: 'format_bold', k: 'font-weight', v: 'bold' }, { type: 'color', content: 'format_color_text', k: 'color' }, { type: 'color', content: 'format_color_fill', k: 'background-color' }, ], }); </script> </html>
NOTE: don't forget to include the material icons style sheet.