Tabulator reading an unknown file with date format

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 ?

Solution

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