Other resources

  • jExcel CE
    Jexcel community edition
  • jTools
    Web components, utilities and plugins
  • Add a custom toolbar in your javascript spreadsheet

    The following example will show how to enable and customize a toolbar in your jexcel plugin.

    Instructions

    The toolbar can be customized with a few parameters.
    typecould be i for icon, select for a dropdown, color 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;
    onclickcan be used together with type:i to implement any custom method. The method will receive the jExcel instance and all marked cells by default.

    Source code

    <html>
    <script src="https://jexcel.net/v3/jexcel.js"></script>
    <script src="https://jexcel.net/v3/japp.js"></script>
    <link rel="stylesheet" href="https://jexcel.net/v3/jexcel.css" type="text/css" />
    <link rel="stylesheet" href="https://jexcel.net/v3/japp.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],
    ];
    
    test = jexcel(document.getElementById('spreadsheet'), {
        data:data,
        colHeaders: ['Country', 'Food', 'Stock'],
        colWidths: [ 300, 150, 100 ],
        columns: [
            { type: 'autocomplete', source:['Brazil','Canada','China','Japan','United States','United Kingdom'] },
            { type: 'dropdown', source:['Apples','Bananas','Carrots','Oranges','Cheese'] },
            { type: 'checkbox' },
        ],
        toolbar:[
            { type:'i', content:'undo', onclick:function() { test.undo(); } },
            { type:'i', content:'redo', onclick:function() { test.redo(); } },
            { type:'i', content:'save', onclick:function () { test.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: It is important to include the material icons style sheet.