Add a custom toolbar in your jquery tables

The following example will show how to integrate a custom native toolbar in your spreadsheet plugin.


The toolbar can be customized with a few parameters.
typecould be i for icon, select for a dropdown, spectrum or a colorpicker.
contentdefines the icon (from material icons) when you use type:i; click here for all possible keys
kmeans the style should be apply to the cell;
vmeans the value of the style should be apply to the cell; When type:select, you can define an array of possibles values;
methodcan be used together with type:i to implement any custom method. The method will receive the spreadsheet instance and all marked cells by default.

Source code

<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href="" type="text/css" />
<link rel="stylesheet" href="" type="text/css" />

<script src=""></script>
<link rel="stylesheet" href="" type="text/css" />

<link rel="stylesheet" type="text/css" href="" />

<div id="my"></div>

data = [
    ['BR', 'Cheese', 1],
    ['CA', 'Apples', 0],
    ['US', 'Carrots', 1],
    ['GB', 'Oranges', 0],

    colHeaders: ['Country', 'Food', 'Stock'],
    colWidths: [ 300, 100, 100 ],
    columns: [
        { type: 'autocomplete', url:'/jspreadsheet/v2/countries' },
        { type: 'dropdown', source:['Apples','Bananas','Carrots','Oranges','Cheese'] },
        { type: 'checkbox' },
        { type:'i', content:'undo', method:undo },
        { type:'i', content:'redo', method:redo },
        { type:'i', content:'save', method:function (instance, selectedCell) { $(instance).jexcel('download'); } },
        { type:'select', k:'font-family', v:['Arial','Verdana'] },
        { type:'select', k:'font-size', v:['9px','10px','11px','12px','13px','14px'] },
        { 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:'spectrum', content:'format_color_text', k:'color' },
        { type:'spectrum', content:'format_color_fill', k:'background-color' },

function undo(instance, selectedCell)

function redo(instance, selectedCell)

NOTE: It is important to have google material fonts loaded.