Other resources

  • jExcel CE
    Jexcel community edition
  • jTools
    Web components, utilities and plugins
  • Custom javascript spreasheet style

    jExcel has many ways to customize the table design. You can apply CSS to the columns when initiating, programmaticaly or by the runtime method rules. It is also available the hability to change the table skin, bring the spreadsheet to any style such as bootstrap or any other style framework.

    How to apply style to your table

    The following example brings two ways to define the CSS for your spreadsheet columns. You can define the CSS for specific columns during the initialization, or through programmatically javascript changes applied to your columns.

    But, after the initialization is still possible to manage the cell style programmatically using the method getStyle or setStyle.

    table.setStyle('A2', 'background-color', 'yellow');
    table.setStyle({ A1:'font-weight: bold; color:red;', B2:'background-color: yellow;', C1:'text-decoration: underline;', D2:'text-align:left;' });
    table.getStyle('A1');
    table.getStyle();



    Source code

    <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 data1 = [
        ['US', 'Cheese', 'Yes', '2019-02-12'],
        ['CA;US;UK', 'Apples', 'Yes', '2019-03-01'],
        ['CA;BR', 'Carrots', 'No', '2018-11-10'],
        ['BR', 'Oranges', 'Yes', '2019-01-12'],
    ];
    var table = jexcel(document.getElementById('spreasheet1'), {
        data:data1,
        columns: [
            { type:'dropdown', title:'Product Origin', width:300, url:'/v3/countries', autocomplete:true, multiple:true }, // Remote source for your dropdown
            { type:'text', title:'Description', width:200 },
            { type:'dropdown', title:'Stock', width:100 , source:['No','Yes'] },
            { type:'calendar', title:'Best before', width:100 },
        ],
        style: {
            A1:'background-color: orange;',
            B1:'background-color: orange;',
            C1:'background-color: orange;',
            D1:'background-color: orange;',
        },
    });
    </script>
    </html>
    


    Runtime javascript setting updates

    The following method is executed during the loading or when any changes are applied to your table. So, you can create conditional rules that will be applied to your table.



    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" />
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
    
    <div id="spreasheet2"></div>
    
    <script>
    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';
            }
        }
    });
    </script>
    </html>