Footer data

Adding fixed calculations the Jspreadsheet data grid footers.
<html>
<script src="https://jspreadsheet.com/v7/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://jspreadsheet.com/v7/jspreadsheet.css" type="text/css" />

<div id="spreadsheet"></div>

<script>
let data = [
    ['Cheese', 10, 6.00, "=B1*C1"],
    ['Apples', 5, 4.00, "=B2*C2"],
    ['Carrots', 5, 1.00, "=B3*C3"],
    ['Oranges', 6, 2.00, "=B4*C4"],
];

jspreadsheet.setExtensions({ formulas: formula })

// A custom method to SUM all the cells in the current column

let SUMCOL = function(instance, columnId) {
    let total = 0;
    for (let j = 0; j < instance.options.data.length; j++) {
        if (Number(instance.records[j][columnId-1].element.innerHTML)) {
            total += Number(instance.records[j][columnId-1].element.innerHTML);
        }
    }
    return total;
}

jspreadsheet(document.getElementById('spreadsheet'), {
    data: data,
    minDimensions: [4,10],
    footers: [
        [
            'Total',
            '=SUMCOL(TABLE(), COLUMN())',
            '=SUMCOL(TABLE(), COLUMN())',
            '=SUMCOL(TABLE(), COLUMN())'
        ]
    ],
    columns: [
        { width:'400px' }
    ],
    license: 'NjIxMjA3MmEzMzEwN2EwMWYxNTc3NTkwMWVlYzZiZmJjZGE3ZDZkOGQzMjEyZmQzYzc4ZWM3YWI0Y2RjNWMxYTYxOTgzMzU1MDgwODJhNjhlMTFlMjAzMGRhNjgyN2VmMGQ1MWQ4ZTFkNjAwOGRmNDNlOGQ4MTA5MzdmZjc2YTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZd01qUTRPRFl5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0ltTm9ZWEowY3lJc0ltWnZjbTF6SWl3aVptOXliWFZzWVNJc0luQmhjbk5sY2lJc0luSmxibVJsY2lJc0ltTnZiVzFsYm5Seklpd2lhVzF3YjNKMFpYSWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0lzSW5CeWFXNTBJaXdpYzJobFpYUnpJaXdpWTJ4cFpXNTBJaXdpYzJWeWRtVnlJaXdpYzJoaGNHVnpJaXdpWm05eWJXRjBJbDBzSW1SbGJXOGlPblJ5ZFdWOQ==',
});
</script>
</html>
Edit this page on GitHub