JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<link rel="stylesheet" href="https://cdn.flexmonster.com/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivot-container"></div>

JavaScript

var data = [{
  "Continent": "Asia",
  "Climate": "Hot",
  "Region": "India",
  "Year": "2023",
  "Month": "2023 - M1",
  "Quantity": 100
}, {
  "Continent": "Asia",
  "Climate": "Cold",
  "Region": "Siberia",
  "Year": "2023",
  "Month": "2023 - M2",
  "Quantity": 100
}, {
  "Continent": "Europe",
  "Climate": "Cool",
  "Region": "England",
  "Year": "2023",
  "Month": "2023 - M3",
  "Quantity": 100
}, {
  "Continent": "Europe",
  "Climate": "Warm",
  "Region": "Italy",
  "Year": "2023",
  "Month": "2023 - M4",
  "Quantity": 100
}, {
  "Continent": "Oceania",
  "Climate": "Hot",
  "Region": "Australia",
  "Year": "2023",
  "Month": "2023 - M5",
  "Quantity": 100
}];
var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 430,
  report: {
    "options": {
      "showEmptyValues": "off"
    },
    "dataSource": {
      "type": "json",
      "data": data,
      "mapping": {
        "Continent": {
          "type": "string"
        },
        "Climate": {
          "type": "string"
        },
        "Region": {
          "type": "string"
        },
        "Year": {
          "type": "string",
          "hierarchy": "Date",
        },
        "Month": {
          "type": "string",
          "hierarchy": "Date",
          "parent": "Year",
          showEmptyValues: true
        },
        "Quantity": {
          "type": "number"
        }
      }
    },
    "slice": {
      "rows": [{
        "uniqueName": "Continent",
      }, {
        "uniqueName": "Climate",
      }, {
        "uniqueName": "Region",
      }, {
        "uniqueName": "Date",
      }],
      "columns": [{
        "uniqueName": "[Measures]"
      }],
      "measures": [{
        "uniqueName": "Quantity"
      }],
      "expands": {
        "expandAll": true
      },
      "drills": {
        "drillAll": true
      }
    }
  }
});