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="expandAllData()"> Expand All Data </button>
<button onclick="updateDataJSON()">Update data from inline JSON</button>
<div id="pivot-container"></div>

JavaScript

var pivot = new Flexmonster({
	container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
  	dataSource: {
      data: [{
    "Color": { "type": "string" },
    "M": {
      "type": "month",
      "dimensionUniqueName": "Days",
      "dimensionCaption": "Days",
      "caption": "Month"
    },
    "W": {
      "type": "weekday",
      "dimensionUniqueName": "Days",
      "dimensionCaption": "Days",
      "caption": "Week Day"
    },
    "Country": {
      "type": "level",
      "hierarchy": "Geography",
      "level": "Сountry"
    },
    "State": {
      "type": "level",
      "hierarchy": "Geography",
      "level": "State",
      "parent": "Сountry"
    },
    "City": {
      "type": "level",
      "hierarchy": "Geography",
      "parent": "State"
    },
    "Price": { "type": "number" },
    "Quantity": { "type": "number" }
  }, {
    "Color": "green",
    "M": "September",
    "W": "Wed",
    "Country": "Canada",
    "State": "Ontario",
    "City": "Toronto",
    "Price": 174,
    "Quantity": 22
  }]
    },"slice": {
        "rows": [
            {
                "uniqueName": "Color"
            },
            {
                "uniqueName": "Geography"
            },
            {
                "uniqueName": "M",
                "caption": "Month"
            },
            {
                "uniqueName": "W",
                "caption": "Week Day"
            }
        ],
        "columns": [
            {
                "uniqueName": "[Measures]"
            }
        ],
        "measures": [
            {
                "uniqueName": "Price",
                "aggregation": "sum"
            },
            {
                "uniqueName": "Quantity",
                "aggregation": "sum"
            }
        ]
    }
  }
});

function expandAllData() {
   flexmonster.expandAllData();
}

function updateDataJSON() {
  var jsonData = [{
    "Color": { "type": "string" },
    "M": {
      "type": "month",
 ...