JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<button onclick="date1Format()">Define date1 format</button>
<button onclick="date2Format()">Define date2 format</button>
<button onclick="window.open('https://www.flexmonster.com/doc/date-and-time-formatting/','_blank')" style="float: right">Formats reference</button>

<div id="pivot-container"></div>

JavaScript

var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 430,
  toolbar: true,
  report: {
    dataSource: {
      data: [{
          "recordID": 1,
          "date1": "2020-05-02T01:23:45",
          "date2": "2019-06-28",
        },
        {
          "recordID": 2,
          "date1": "2019-07-29T13:06:59",
          "date2": "2029-03-07",
        },
        {
          "recordID": 3,
          "date1": "2009-11-01T21:38:31",
          "date2": "2002-03-17",
        }
      ],
      mapping: {
        "recordID": {
          type: "number"
        },
        "date1": {
          type: "datetime",
          format: "GMT+6:dd/MM/yyyy HH:mm:ss"
        },
        "date2": {
          type: "date string",
          format: "d MMM yyyy"
        }
      }
    },
    slice: {
      "rows": [{
        "uniqueName": "recordID"
      }],
      "columns": [{
        "uniqueName": "[Measures]"
      }],
      "measures": [{
          "uniqueName": "date1",
          "aggregation": "max"
        },
        {
          "uniqueName": "date2",
          "aggregation": "max"
        },
        {
          "uniqueName": "recordID",
          "aggregation": "count",
          "active": false
        }
      ]
    },
  }
});

function date1Format() {
	let currReport = pivot.getReport();
  let newFormat = prompt("Please enter your date1 format:");
  currReport.dataSource.mapping.date1.format = newFormat;
  pivot.setReport(currReport);
}

function date2Format() {
	let currReport = pivot.getReport();
  let newFormat = prompt("Please enter your date2 format:");
  currReport.dataSource.mapping.date2.format = newFormat;
  pivot.setReport(currReport);
}