JSFiddle - React, Tailwind, and code Playground

Mapping configuration

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>

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

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  customizeCell: customizeCellFunction,
  report: {
    dataSource: {
      data: getData(),
      mapping: {
        datefield1: {
          type: "date string",
          caption: "Date 1",
        },
        datefield2: {
          type: "date string",
          caption: "Date 2",
        },
      },
    },
    slice: {
      rows: [
        {
          uniqueName: "datefield1",
        },
        {
          uniqueName: "datefield2",
        },
      ],
      columns: [
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Formula",
          formula:
            'if(max("datefield1")> max(datefield2), max("datefield1"), max("datefield2"))',
          caption: "Formula",
        },
      ],
    },
    options: {
      grid: {
        type: "flat",
        showGrandTotals: "off",
      },
      datePattern: "M/d/YYYY",
    },
  },
})

function convertTimestampToDateString(timestamp) {
  const date = new Date(timestamp)
  return date.toLocaleDateString("en-US")
}

function customizeCellFunction(cell, data) {
  if (data.type == "value") {
    if (data.measure && data.measure.name == "Formula") {
      cell.text = convertTimestampToDateString(data.value)
    }
  }
}

function getData() {
  return [
    {
      datefield1: "2021-03-04T22:52:00",
      datefield2: "2020-01-11T23:55:00",
    },
  ]
}