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="exportTo()">
  Export to Excel
</button>
<div id="pivotContainer"></div>

JavaScript

var pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    dataSource: {
      data: getData(),
      mapping: {
        "Case Id": {
          type: "number"
        },
        "Delivered Date Time": {
          type: "date string"
        },
        "Deadline": {
          type: "date string"
        },
        "Production Support Hours": {
          type: "number"
        },
        "Production Hours": {
          type: "number"
        },
        "Agent": {
          type: "string"
        }
      }
    },
    options: {
    	grid: {
      	type: "flat"
      }
    }
  }
});

function exportTo() {
	flexmonster.exportTo("excel");
}

function getData() {
  return [{
      "Case Id": 0,
      "Delivered Date Time": "2020-05-18T07:09:04+00:00",
      "Deadline": "2020-05-15T09:39:25+00:00",
      "Production Support Hours": 41341,
      "Production Hours": 44004,
      "Agent": "Agent B"
    },
    {
      "Case Id": 1,
      "Delivered Date Time": "2020-05-28T09:36:25+00:00",
      "Deadline": "2020-05-13T16:32:47+00:00",
      "Production Support Hours": 34579,
      "Production Hours": 20228,
      "Agent": "Agent B"
    },
    {
      "Case Id": 2,
      "Delivered Date Time": "2020-05-10T03:02:55+00:00",
      "Deadline": "2020-05-19T01:14:03+00:00",
      "Production Support Hours": 46936,
      "Production Hours": 25159,
      "Agent": "Agent A"
    },
    {
      "Case Id": 3,
      "Delivered Date Time": "2020-05-20T02:42:16+00:00",
      "Deadline": "2020-05-13T05:33:32+00:00",
      "Production Support Hours": 33728,
      "Production Hours": 48029,
      "Agent": "Agent A"
    },
    {
      "Case Id": 4,
      "Delivered Date Time": "2020-05-23T11:32:11+00:00",
      "Deadline": "2020-05-07T14:54:10+00:00",
      "Production Support Hours": 54174,
      "Production Hours": 57733,
      "Agent": "Agent B"
    },
    {
      "Case Id": 5,
      "Delivered Date Time":...