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

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.