Search code examples
tabulator

Update bottomCalc-value, based on selection (if any)


I just found Tabulator, and i love it. I'm currently using version 4.5. The bottomCalc-function isuseful, however, i would like it to be updated, based on the selection of row(s).

Is there a native option i've missed, or, should it be done manually, fx. triggered by the row-selections?

Column example:

                {
                  title: 'Offline Amount',
                  field: 'offline',
                  bottomCalc: 'sum',
                  formatter: 'html',
                  align: 'center',
                  width: 150,
                },

And selectField: true for columns.

Currenly, without updated bottomCalc: Currenly without updated bottomCalc

And, i would like it to be updated, based on the selection (if there is any).


Update:

I guess the rowSelectionChanged-option, will be the best way to handle the update of .tabulator-footer .tabulator-calcs-holder, but i'm still unsure about, how to do that part.

If it's a question of looping through the selected values, calculate the sum, and update the value - or if i'm able to use another event, reuse a specific function, or yet another thing.


Solution

  • There is no built in way to achieve this but there may be a work around.

    You could store a property in the row data that stores the selected state of the row. You could then use the rowSelected and rowDeselected callbacks to change this value.

    You could then use a Custom Calculation Function to then generate the sum of the column values for the rows where the data object has a selected property of true.

    Update

    As of version 4.6, there is now a recalc function you can call on the table, so you could set up your calc function as outlined in the answer above and then use the rowSelectionChanged callback to trigger the update:

    var table = new Tabulator("#example-table", {
        rowSelectionChanged:function(data, rows){
            table.recalc();
        },
    });