How to add a new calculated row to a Table widget [Linux]
Introduction
This article demonstrates how to add a new calculated row, Grand Total in our example, to a Table widget in Sisense dashboards using a custom JavaScript script. With this article you should learn the base to understand how to add a new row with calculation based on other rows data, ensuring the calculated row values persists across pagination updates. The solution is tested on Sisense 2026.1.2 and works for both cloud and on-premise deployments.
Step-by-Step Guide
1. Prepare your environment
Open an existing dashboard that contains a Table widget you want to add a calculated row to, in our example, Grand Total row. Make sure the table has numeric columns you want to sum. Take note of the column positions (0-based index) that should be included in the total calculation.
2. Apply the code
Open the Table widget in Edit mode, go to the three dots menu, select Edit Script, and paste the following code:
var addGrandTotal = function (sender, event) {
// 1. Correctly scope to the widget's own element
var $el = $(element);
var $table = $el.find("table.table-grid__table").length
? $el.find("table.table-grid__table")
: $el.find("table").first();
if (!$table.length) return; // 2. Cleanup existing grand-total rows to ensure fresh calculation
var existingTotal = $table.find("tr.grand-total").length;
$table.find("tr.grand-total").remove();
var $rows = $table.find("tbody tr");
if (!$rows.length) return; // 3. Determine real column cells, excluding phantom/hidden columns
var $firstRow = $rows.first(); // Filter for cells that have a column index class to avoid technical/phantom columns
var $referenceCells = $firstRow.find("td").filter(function () {
return (
$(this).attr("class").indexOf("table-grid__cell--col-") !== -1 &&
!$(this).hasClass("table-grid__cell--phantom")
);
});
var colCount = $referenceCells.length; // Indices for columns to sum (0-based), change it according to your needs and columns-to-sum position
var sumColumns = [1, 2, 3];
var totals = {};
sumColumns.forEach(function (colIdx) {
totals[colIdx] = 0;
}); // 4. Calculate totals for current view
$rows.each(function () {
var $cells = $(this).find("td");
sumColumns.forEach(function (colIdx) {
if ($cells.length > colIdx) {
var cellValue = $cells
.eq(colIdx)
.text()
.replace(/[^0-9.\-]/g, "");
var num = parseFloat(cellValue);
if (!isNaN(num)) {
totals[colIdx] += num;
}
}
});
}); // 5. Build Grand Total row
var $grandTotalRow = $("<tr/>", {
class: "grand-total table-grid__row",
style: "height: 26px; background-color: #f9f9f9;",
});
for (var i = 0; i < colCount; i++) {
var isSumCol = sumColumns.indexOf(i) !== -1;
var content = "";
if (i === 0) {
content = "Grand Total";
} else if (isSumCol) {
content = totals[i].toLocaleString();
} // Get original style but force bold and center/middle alignment
var originalStyle = $referenceCells.eq(i).attr("style") || "";
var $td = $("<td/>", {
class:
"table-grid__cell table-grid__cell--rows table-grid__cell--col-" + i,
style:
originalStyle +
"; border-width: 1px; vertical-align: middle; font-weight: bold;",
});
var $contentWrapper = $("<div/>", { class: "table-grid__content" }).append(
$("<div/>", { class: "table-grid__content__wrapper" }).append(
$("<div/>", { class: "table-grid__content__inner" }).text(content),
),
);
$td
.empty()
.append('<div class="table-grid__cell-corner"></div>')
.append($contentWrapper);
$grandTotalRow.append($td);
} // 6. Append to tbody
$table.find("tbody").append($grandTotalRow); // 7. Prevent layout jumps (only trigger resize if we actually added a new row that wasn't there before page change)
if (!existingTotal) {
setTimeout(function () {
if (window.dispatchEvent) {
window.dispatchEvent(new Event("resize"));
}
}, 100);
}
};
// Bind to 'ready' for the initial load, and 'domready' for pagination updates
widget.on("ready", addGrandTotal);
widget.on("domready", addGrandTotal);
3. Customize the script for your use case
Before saving, update the following to match your table:
sumColumns – Update the array [1, 2, 3] with the 0-based indices of the columns you want to sum. For example, if you want to sum the second and fourth columns only, use [1, 3]. The first column (index 0) is always used as the "Grand Total" or your preferable name label cell.
background-color – Optionally adjust the Grand Total row's background color in the style string to match your dashboard's theme.
Conclusion
By binding the Grand Total logic to both the ready and domready widget events and correctly scoping the script to the widget's own element, you can ensure a stable and persistent calculated row in your Table widgets – one that recalculates correctly after pagination, and other DOM changes. The script is a flexible starting point: you can adapt the column indices, styling, and label text to fit your specific table structure, or extend it to calculate averages, minimums, or other aggregate values as needed.
References/Related Content
Disclaimer: This post outlines a potential custom workaround for a specific use case or provides instructions regarding a specific task. The solution may not work in all scenarios or Sisense versions, so we strongly recommend testing it in your environment before deployment. If you need further assistance with this, please let us know.
