Calculate date time difference in tabulator row operation

Question

I have a scenario where I would like to calculate the time difference in minutes between two rows and have the data in consecutive row. I am using tabulator. Currently I have gone through the definition for custom formatters which is for columns but I am unsure how this scenario can be achieved on rows . However I have tried the below option and it doesn't seem to work.

var table = new Tabulator("#editor", {
        downloadConfig:{
            columnGroups:false, 
            rowGroups:false,
        },
        height:360, 
        data: arrayFlight,
        pagination:"local",
        resizableColumns: false,
        paginationSize:12,
        columnVertAlign:"center",
        columnHoriAlign:"center",
        columns:[
                {title:"Start time", field:"sTime", align:"center", formatter:"datetime", formatterParams:{inputFormat:"DD-MM-YYYY hh:mm:ss", outputFormat:"DD-MM-YYYY hh:mm:ss", invalidPlaceholder:"-"}, sorter:false, headerSort:false, width:95},
                {title:"End time", field:"eTime", align:"center", formatter:"datetime", formatterParams:{inputFormat:"DD-MM-YYYY hh:mm:ss", outputFormat:"DD-MM-YY hh:mm:ss", invalidPlaceholder:"-"}, sorter:false, headerSort:false, width:95},
                {title:"Duration", field:"durTime", align:"center", calc: sTime-eTime, sorter:false, headerSort:false, width:95},
                ],
            },  
        ],

Here is how I would like to visualize this:

Any help is highly appreciated.

Look at [Mutators](http://tabulator.info/docs/4.8/mutators). — Adrian Klaver, Nov 07 '20 at 16:39
@AdrianKlaver I had a look but did not understand much, can you please help to elaborate how it will work with the row operation. — John, Nov 08 '20 at 16:47
Take a look at this [fiddle](https://jsfiddle.net/aklaver/yaqwp04r/) — Adrian Klaver, Nov 08 '20 at 17:53
@AdrianKlaver Here the value of `Diff` field doesn't changes after editing, When I edit the values in field `start time` and `finish time` after the data is loaded. — John, Nov 09 '20 at 02:14
See revised [fiddle](https://jsfiddle.net/aklaver/goetq6hv/) that will deal with edits to either datetime field. You could also do the same thing using the cell `cellEdited` callback. — Adrian Klaver, Nov 09 '20 at 14:54
FYI, you might want to read this [Comment replies](https://meta.stackexchange.com/questions/43019/how-do-comment-replies-work). Short version, @username will not work to 'ping' someone not already involved in the conversation. — Adrian Klaver, Nov 09 '20 at 23:32
@AdrianKlaver Thanks , but when I implement according to the fiddle you provided I get `maximum-call-stack-size-exceeded-error` in console and what I observed is multiple times edit is being printed, is there any specific reason for that ? Please see my JS implementation here [link](https://jsfiddle.net/htwcxrz6/) — John, Nov 11 '20 at 08:23
What you show really has nothing to do with a column mutator. Also, again you have changed what you want to happen. If you want a working answer you will need to provide a complete and immutable description of your requirements. — Adrian Klaver, Nov 11 '20 at 15:19
@AdrianKlaver Okay but why do I get this error `maximum-call-stack-size-exceeded-error` the intention is still same , I mean my scenario is still same, I am just adapting your answer BDW I am using tabulator v4.8 — John, Nov 11 '20 at 17:29
The intention is not same. What I proposed was a mutator function to be attached to a column using the Tabulator mutator functionality. What you have done is attached it to an `input` field and then have it update via a `POST`. Have not stepped through all the code, but the error is probably happening because you set up an infinite loop. You update the field which updates the field which updates the field, ad infinitum . — Adrian Klaver, Nov 11 '20 at 21:30
adrian i will attempt to answer below, as a bit of a note adrian if you have an actual answer as you do in this case, please raise it as an answer against the issue rather than a comment, that way the question will show up as answered if someone accepts it and it make it easier for others to find it — Oli Folkerd, Nov 15 '20 at 16:21
@OliFolkerd it was not clear to me that I had answered John's question. Especially given the fiddle John provided. — Adrian Klaver, Nov 16 '20 at 22:20

score 0 · Answer 1 · answered Nov 15 '20 at 16:26

0

As @Adrian Klaver sates the correct approach is to use a Muataor to calculate the value for a new column

And also as @adrian has already stated, the error you are seing is unrelated to what he is proposing.

Essentially you start by creating a mutator function that will receive the row data and then return a new value for that column based off of that row data.

var durationMutator = function(value, data){
    //value - original value of the cell
    //data - the data for the row

    var start = new Date(data.sTime);
    var end = new Date(data.eTime);

    return end - start ;
}

you can then assign this to your your duration column on the mutator property:

{title:"Duration", field:"durTime", mutator:durationMutator},

That is all you should need to do.

answered Nov 15 '20 at 16:26

Oli Folkerd

7,510
1
22
46

when I edit the cell will the data change dynamically with this above implementation ? – John Nov 16 '20 at 16:14
AFAIK, no as the mutator is only working on the `durTime` field. As I showed in my second fiddle you need to put `mutatorEdit` on the fields you edit. – Adrian Klaver Nov 16 '20 at 22:25
@AdrianKlaver Okay then what is the role of `if (type == "edit"){ console.log('edit'); component.getRow().getCell("timeDiff").setValue(new_value); return value; //return the new value for the cell data. }else{ return new_value }}` Because here I am getting error as `Uncaught (in promise) ReferenceError: type is not defined` – John Nov 17 '20 at 02:49
Snippets of code without context are not useful. You will need to show the entire code section that you are using the above in. – Adrian Klaver Nov 17 '20 at 05:15
@AdrianKlaver here is the complete code [link]https://github.com/Codeout256/tabulatorview/blob/main/index.html with context defined. whenever I use the fiddle code you have provided for `type==edit` it says error `type is not defined`. Can you please help – John Nov 20 '20 at 04:32
This fails because you using it out of context as a function inside a function inside an input. It needs to be a stand alone function that is passed to `mutatorEdit` just like I showed in my fiddle. It does not belong in the `input` code. – Adrian Klaver Nov 20 '20 at 15:42
@AdrianKlaver I placed it outside the script function but still it doesnt works and same error. can you please help where should I exactly place this here according to the code I pasted here [link](https://github.com/Codeout256/tabulatorview/blob/main/index.html)? – John Nov 21 '20 at 16:59
The full signature for the function is `function(value, data, type, params, component)` you only have ` function(value, data)`. – Adrian Klaver Nov 21 '20 at 17:17
@AdrianKlaver, I dont know for what reason I am getting this error `Uncaught RangeError: Maximum call stack size exceeded at Object.diffMutator [as mutator] ` even though I kept the function outside the `input` function [link](https://github.com/Codeout256/tabulatorview/blob/main/index.html) . How do I use `cell edited` functionality of tabulator here ? – John Nov 22 '20 at 16:38
You have not changed the function signature, so you don't have access to `component` and hence `cell`. Start with a simple test case and make it work there and then move into your production code. – Adrian Klaver Nov 22 '20 at 17:16
@AdrianKlaver if I dont use component then I get this error `(index):196 Uncaught ReferenceError: component is not defined at Object.diffMutator [as mutator]` I wonder why this doesnt works here because I have adapted everything whatever you mentioned in the fiddle – John Nov 22 '20 at 17:28
Did you include the complete signature `function(value, data, type, params, component)`. Again do this as smaller test case then scale up. – Adrian Klaver Nov 22 '20 at 17:34

Calculate date time difference in tabulator row operation

1 Answers1