Keep updated

Documentation

Examples

How to change your table style

Give your clients a nice look table with colours and styling.



Source code

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/1.5.7/js/jquery.jexcel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/1.5.7/js/excel-formula.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/1.5.7/css/jquery.jexcel.min.css" type="text/css" />

<div id="my"></div>

<script>
data = [
    ['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)'],
];

$('#my').jexcel({
    data:data,
    colHeaders: ['Country', 'Food', 'Stock', 'Price'],
    colWidths: [ 300, 100, 100, 100 ],
    columns: [
        { type: 'autocomplete', url:'/jexcel/countries' },
        { type: 'autocomplete', source:['Apples','Bananas','Carrots','Oranges','Cheese','Kiwi','Chocolats','Pears'] },
        { type: 'checkbox' },
        { type: 'number' },
    ]
});

$('#my').jexcel('updateSettings', {
    table: function (instance, cell, col, row, val, id) {
        // Number formating
        if (col == 3) {
            // Get text
            txt = $(cell).text();
            // Format text
            txt = numeral(txt).format('0,0.00');
            // Update cell value
            $(cell).html(' $ ' + txt);
        }

        // Odd row colours
        if (row % 2) {
            $(cell).css('background-color', '#edf3ff');
        }

        // Remove controls for the last row
        if (row == 9) {
            if (col < 3) {
                $(cell).html('');
            } 

            if (col == 2) {
                $(cell).html('Total');
            }

            $(cell).css('background-color', '#f46e42');
            $(cell).css('color', '#fff');
        }
    }
});

// This is a custom method for rounding
function ROUND(v, f)
{
    v = v.toFixed(f);
    v = numeral(v).format('0,0.00');

    return '$ ' + v;
}
</script>
</html>