Tabulator:have more than one calculation at the bottom of a column - tabulator

Question

I have recently discovered Tabulator.js and its possibility to have e. g. the average of all values of a column at the bottom.
I wondered whether one can also have the minimum and maximum instead of just one thing. I did not find that in the docs, but it might be possible by extending the library? (I would not want to have one at the top, and as I need more than two calculations, that would not be a solution anyway.)

Answer 1

This is similar to another answer recently for the topCalc property.
You can put, effectively, whatever you want in a footer row. Use the bottomCalc and bottomCalcFormatter properties of the column definition along with a custom function to get the appropriate content.
In the custom function you can use bult in functions such as the table.getCalcResult() method.
eg: return an array of sum, average, count
let table = new Tabulator("#my-table-id", {
...
columns:[
...
{
title: 'My col',
...,
bottomCalc: function(v, d, p) {
// v - array of column values
// d - all table data
// p - params passed from the column definition object
let res = table.getCalcResults();
// eg Get sum and count for a column with id 'C1'
let c1_calc = 0, c1_count = 0;
d.forEach(function(row) {
c1_calc += row["c1"];
c1_count++;
});
return [
(parseInt(res.bottom["COL_1_ID"], 10) + parseInt(res.bottom["COL_2_ID"], 10)),
(parseInt(res.bottom["COL_1_ID"], 10) + parseInt(res.bottom["COL_2_ID"], 10)) / 2,
c1_calc,
c1_count
];
}
}
],
...
);
Once you have the content you can use a custom formatter to display it nicely.
See Custom Calculation Function and Calculation Results in the docs.
I have updated my Codepen again to add a bottomCalc function and formatter. See the definition for the AggregateFn column, the getBottomAggregate function that implements it and the bottomAggregateFormatter function that formats it.
Hope that helps.