Other resources

  • jExcel CE
    Jexcel community edition
  • jTools
    Web components, utilities and plugins
  • Column types

    Native column types

    The native available types in jexcel javascript spreadsheet are the following:

    • text
    • numeric
    • hidden
    • dropdown
    • autocomplete
    • checkbox
    • radio
    • calendar
    • image
    • color

    There are several other properties to change the behavior of those columns, please check the dropdown, calendar examples to get more advanced examples.


    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" />
    
    <div id="spreadsheet"></div>
    
    <script>
    var data = [
        ['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
        ['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
    ];
    
    jexcel(document.getElementById('spreadsheet'), {
        data:data,
        columns: [
            { type: 'text', title:'Car', width:120 },
            { type: 'dropdown', title:'Make', width:200, source:[ "Alfa Romeo", "Audi", "Bmw" ] },
            { type: 'calendar', title:'Available', width:200 },
            { type: 'image', title:'Photo', width:120 },
            { type: 'checkbox', title:'Stock', width:80 },
            { type: 'numeric', title:'Price', width:100, mask:'$ #.##,00', decimal:',' },
            { type: 'color', width:100, render:'square', }
         ]
    });
    </script>
    </html>
    

    Custom column type

    jExcel is very powerful but still very flexible. The following example shows how we created a new custom column based on the clockpicker plugin by weareoutman.

    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="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.js"></script>
    
    <div id="custom"></div>
    
    <script>
    var data2 = [
        ['PHP', '14:00'],
        ['Javascript', '16:30'],
    ];
    
    var customColumn = {
        // Methods
        closeEditor : function(cell, save) {
            var value = cell.children[0].value;
            cell.innerHTML = value;
            return value;
        },
        openEditor : function(cell) {
            // Create input
            var element = document.createElement('input');
            element.value = cell.innerHTML;
            // Update cell
            cell.classList.add('editor');
            cell.innerHTML = '';
            cell.appendChild(element);
            $(element).clockpicker({
                afterHide:function() {
                    setTimeout(function() {
                        // To avoid double call
                        if (cell.children[0]) {
                            myTable.closeEditor(cell, true);
                        }
                    });
                }
            });
            // Focus on the element
            element.focus();
        },
        getValue : function(cell) {
            return cell.innerHTML;
        },
        setValue : function(cell, value) {
            cell.innerHTML = value;
        }
    }
    
    myTable = jexcel(document.getElementById('custom'), {
        data:data2,
        columns: [
            { type: 'text', title:'Course Title', width:300 },
            { type: 'text', title:'Time', width:100, editor:customColumn },
         ]
    });
    </script>
    </html>