Tabulator reading an unknown file with date format

0
votes

I'm using a JS Library called Tabulator to read unknown tables data/files so I've used this code since then to read any unknown data without a problem.

var table = new Tabulator("#table", {
 data:tableData,
  columns:Object.keys(tableData[0]).map(obj => {
    return {
      title: obj,
      field: obj,
      sorter: "string",
      align: "center",
    };
  }),
});

and it worked great in most cases ,but then i have tried to input a table with date format (eg. 2018-12-12 ) but the output was in epoch time format ,In the field where it suppose to render the date format it rendered this 1544572800000 i need it to be a human readable format

is there's a way to add a condition to the code to change the column format in case of the column title was (birth Date) for example ?

2
javascripttabulator
That value is "epoch time" and is usually how you want a date to be represented on a computer until you know how you want to display it. Research epoch time and then look into how you want to use this value, using the date-time APIs available to you. - user1531971
@jdv but why would i use an API converter to this , there has to be a better way to even import it as a string "2018-12-12" i can even work with that .. I've tried to add a function but it seems to be ignoring it all together sorter: ()=>{ console.log(obj); if(obj != "birthdayDate"){"date"}else { "string" }}, i'm saying it has ignored it as i see nothing in the console. - LoopingDev
Ask yourself what "2018-12-12" means. What does it mean in your current locale? What does it mean when it was inserted as data by someone else somewhere else? You will need to sort out whatever Tabulator does when reading and converting (and there is a conversion/interpretation step for lots of data types, always) and then sort out how you want to use this value. Which is not immediately clear to me based on what you have here. - user1531971
That all being said, if you are storing dates as data somewhere, it is going to be stored as epoch time often. In this case if you just need to store the DOB info and you never intend to use it as a date, then you will have to coerce it to a string, either when reading or writing. If this is your question, then maybe edit it and make it clear what you are doing with this data. - user1531971
Related: stackoverflow.com/q/51600815/1531971 - user1531971

2 Answers

0
votes

That looks like you have an issue server side with whatever is providing your data, for consistencies sake i would recommend fixing it there, but if that is not possible then you have two options.

Mutator

If you want to alter the data in the table so it can be exported in a different format, you can set a data mutator on a column to map this data to something more usable.

In this example lets assume it is the date field that you are using, we will create a custom mutator and then in the column definition for that column assign the mutator:

//define custom mutator
var dateMutator = function(value, data, type, params, component){
    //value - original value of the cell
    //data - the data for the row
    //type - the type of mutation occurring  (data|edit)
    //params - the mutatorParams object from the column definition
    //component - when the "type" argument is "edit", this contains the cell component for the edited cell, otherwise it is the column component for the column

    //convert date to JS date object
    var d = new Date(0); // The 0 there is the key, which sets the date to the epoch
    d.setUTCSeconds(value);

    //format date to YYYY-MM-DD
    var month = '' + (d.getMonth() + 1);
    var day = '' + d.getDate();
    var year = d.getFullYear();

    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;

    return [year, month, day].join('-');
}

//column definition
{title:"Date", field:"date", mutatorData:dateMutator}

More information on mutators can be found in the Mutator Documentation

Formatter

If you want to keep the underlying data as it is but just display it differently to the user then you want to use a formatter.

The code for this is pretty similar to the mutator, again we will define a custom function and then bind it to the column in the column definition

//define custom formatter
var dateFormatter = function(cell, formatterParams, onRendered)
    //cell - the cell component
    //formatterParams - parameters set for the column
    //onRendered - function to call when the formatter has been rendered

    //convert date to JS date object
    var d = new Date(0); // The 0 there is the key, which sets the date to the epoch
    d.setUTCSeconds(cell.getValue());

    //format date to YYYY-MM-DD
    var month = '' + (d.getMonth() + 1);
    var day = '' + d.getDate();
    var year = d.getFullYear();

    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;

    return [year, month, day].join('-');
}

//column definition
{title:"Date", field:"date", formatter:dateFormatter}

More information on formatters can be found in the Formatter Documentation

0
votes

Took the example from @Oli Folkerd and simplified it a little bit. 

//define custom mutator
var dateMutator = function(value, data, type, params, component){
   return (new Date(value)).toISOString().split('T')[0];
//returns current value as YYYY-MM-DD
}

//column definition
{title:"Date", field:"date", mutatorData:dateMutator}