Other resources

  • jExcel CE
    Jexcel community edition
  • jTools
    Web components, utilities and plugins
  • Events on jExcel spreadsheet

    Update Settings on the Go

    jExcel offers a native feature to customize your table on the go. You can define the method updateTable to create rules to customize the data should be shown to the user, as the example below.

    See the following example in action

    // Live update of the settings
    var data2 = [
        ['BR', 'Cheese', 1, 3.99],
        ['CA', 'Apples', 0, 1.00],
        ['US', 'Carrots', 1, 0.90],
        ['GB', 'Oranges', 0, 1.20],
        ['CH', 'Chocolats', 1, 0.40],
        ['AR', 'Apples', 1, 1.10],
        ['AR', 'Bananas', 1, 0.30],
        ['BR', 'Oranges', 1, 0.95],
        ['BR', 'Pears', 1, 0.90],
        ['', '', '', '=ROUND(SUM(D1:D8), 2)'],
    ];
    
    var table2 = jexcel(document.getElementById('spreasheet2'), {
        data:data2,
        columns: [
            { type: 'autocomplete', title:'Country', width:'250', url:'/v3/countries' },
            { type: 'autocomplete', title:'Food', width:'150', source:['Apples','Bananas','Carrots','Oranges','Cheese','Kiwi','Chocolats','Pears'] },
            { type: 'checkbox', title:'Stock', width:'100' },
            { type: 'number', title:'Price', width:'100' },
        ],
        updateTable:function(instance, cell, col, row, val, label, cellName) {
            // Number formating
            if (col == 3) {
                // Get text
                txt = cell.innerText;
                // Format text
                txt = numeral(txt).format('0,0.00');
                // Update cell value
                cell.innerHTML = '$ ' + txt;
            }
    
            // Odd row colours
            if (row % 2) {
                cell.style.backgroundColor = '#edf3ff';
            }
    
            // Total row
            if (row == 9) {
                if (col < 3) {
                    cell.innerHTML = '';
                } 
    
                if (col == 2) {
                    cell.innerHTML = 'Total';
                    cell.style.fontWeight = 'bold';
                }
    
                cell.className = '';
                cell.style.backgroundColor = '#f46e42';
                cell.style.color = '#ffffff';
            }
        }
    });
    

     

    Basic events

    jExcel basic events available in this current version.

    Handling events on your spreasheet events

    Eventdescription
    onload This method is called when the method setData
    onbeforechange Before a column value is changed.
    onchange After a column value is changed.
    onpaste After a paste action is performed in the javascript table.
    oninsertrow After a new row is inserted.
    ondeleterow After a row is excluded.
    oninsertcolumn After a new column is inserted.
    ondeletecolumn After a column is excluded.
    onresizerow After a row is resized.
    onresizecolumn After a column is resized.
    onmoverow After a row is moved to a new position.
    onmovecolumn After a column is moved to a new position.
    onselection On the selection is changed.
    onsort After a colum is sorted.
    onfocus On table focus
    onblur On table blur