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>

<div id="pivotContainer"></div>

JavaScript

var pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      data: getData(),
      mapping: {
        "Date 1": {
          type: "date string"
        },
        "Date 2": {
          type: "date string"
        },
        "Date 3": {
          type: "date string"
        },
        "Date 4": {
          type: "date string"
        }
      }
    },
    options: {
      grid: {
        type: "flat",
        showGrandTotals: "off"
      }
    },
    localization: {
      grid: {
        dateInvalidCaption: ""
      }
    }
  }
});

flexmonster.customizeCell((cell, data) => {
  if (data.hierarchy && data.hierarchy.uniqueName == "Date 4" && data.value == "")
    cell.text = "-";
})

function getData() {
  return [{
      "Date 1": null,
      "Date 2": "2020-05-25T16:07:17+00:00",
      "Date 3": "2020-08-04T17:27:52+00:00",
      "Date 4": "2020-02-23T13:49:53+00:00"
    },
    {
      "Date 1": "2020-01-04T19:59:34+00:00",
      "Date 2": null,
      "Date 3": "2020-01-11T13:09:09+00:00",
      "Date 4": "2020-01-10T17:01:28+00:00"
    },
    {
      "Date 1": "2020-07-20T07:57:28+00:00",
      "Date 2": "2020-07-30T08:20:22+00:00",
      "Date 3": null,
      "Date 4": "2020-01-24T12:10:38+00:00"
    },
    {
      "Date 1": "2020-03-22T16:47:14+00:00",
      "Date 2": "2020-04-21T21:21:00+00:00",
      "Date 3": "2020-07-04T08:44:03+00:00",
      "Date 4": null
    },
    {
      "Date 1": "2020-08-16T00:47:01+00:00",
      "Date 2": "2020-07-16T23:50:49+00:00",
      "Date 3": null,
      "Date 4": "2020-03-13T20:09:46+00:00"
    },
    {
      "Date 1": null,
      "Date 2": "2020-06-24T11:37:36+00:00",
      "Date 3": "2020-01-24T10:52:51+00:00",
      "Date 4": "2020-03-05T08:30:38+00:00"
    },
    {
      "Date 1": "2020-03-30T00:17:04+00:00",
      "Date 2": null,
      "Date 3": "2020-08-03T19:21:43+00:00",
      "Date 4": "2020-01-12T22:40:28+00:00"
...