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/2.7-beta2/flexmonster.js"></script>

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

JavaScript

new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/2.7-beta2/",
  width: "100%",
  height: 600,
  toolbar: true,
  report: {
    "dataSource": {
      "data": getData()
    },
    "slice": {
      "reportFilters": [{
        "uniqueName": "Duration"
      }],
      "rows": [{
        "uniqueName": "DateString",
        "filter": {
          "query": {
            "after": "2018-01-01"
          }
        }
      }],
      "columns": [{
          "uniqueName": "Product"
        },
        {
          "uniqueName": "[Measures]"
        }
      ],
      "measures": [{
        "uniqueName": "Price",
        "aggregation": "sum"
      }]
    }
  }
});

function getData() {
  return [{
      "Price": {
        type: "number"
      },
      "Product": {
        type: "string"
      },
      "Company": {
        type: "string"
      },
      "Date": {
        type: "year/month/day"
      },
      "DateTime": {
        type: "datetime"
      },
      "DateString": {
        type: "date string"
      },
      "Country": {
        type: "string"
      },
      "Duration": {
        type: "time"
      }
    },
    {
      "Price": 83,
      "Product": "Food",
      "Company": "MYOPIUM",
      "Date": "2017-04-16T01:58:42+00:00",
      "DateTime": "2014-07-31T09:10:03+00:00",
      "DateString": "2016-01-24T22:32:46+00:00",
      "Country": "New Caledonia",
      "Duration": 73
    },
    {
      "Price": 60,
      "Product": "Accessory",
      "Company": "XOGGLE",
      "Date": "2014-05-23T14:34:50+00:00",
      "DateTime": "2015-03-07T17:57:31+00:00",
      "DateString": "2014-04-09T08:39:16+00:00",
      "Country": "Qatar",
      "Duration": 633
    },
    {
      "Price": 67,
      "Product": "Car",
      "Company": "DOGTOWN",
      "Date": "2017-07-05T02:57:39+00:00",
      "DateTime": "2015-12-05T20:28:25+00:00",
      "DateString": "2016-09-11T15:33:16+00:00",
      "Country": "Vatican City State (Holy See)",
     ...