Other resources

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://bossanova.uk/jexcel/v3/jexcel.js"></script>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jexcel/v3/jexcel.css" type="text/css" />
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.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:'/jexcel/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://bossanova.uk/jexcel/v3/jexcel.js"></script>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jexcel/v3/jexcel.css" type="text/css" />
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.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,
    columnSorting:false,
    columns: [
        { type: 'autocomplete', title:'Country', width:'250', url:'/jexcel/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>