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://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.min.js"></script>
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.3.2/dist/html2canvas.min.js"></script>

<button onclick="customExport()">Export drill-through</button>
<div id="pivot-container" class="col-md-10 col-sm-9"></div>

JavaScript

new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 550,
  toolbar: true,
  report: {
    "dataSource": {
      "dataSourceType": "json",
      "mapping": {
        "datasource": {
          "type": "string"
        },
        "date": {
          "type": "string"
        },
        "recordId": {
          "type": "id"
        },
        "month": {
          "type": "string",
          "folder": "Dates",
          "order": [
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12"
          ]
        },
        "amount": {
          "type": "number",
          "toMeasuresFlag": true
        },
        "current": {
          "type": "number"
        },
        "level1": {
          "hierarchy": "rows"
        },
        "previous": {
          "type": "number"
        }
      },
      "data": [{
          "datasource": "Current",
          "recordId": 1,
          "month": "01",
          "date": "01",
          "amount": 120000,
          "type": "current",
          "level1": "Row"
        },
        {
          "datasource": "Previous",
          "recordId": 13,
          "month": "01",
          "date": "01",
          "amount": 60000,
          "type": "previous",
          "level1": "Row"
        }
      ]
    },
    "formats": [{
        "name": "",
        "thousandsSeparator": " ",
        "decimalSeparator": ",",
        "decimalPlaces": 2,
        "currencySymbol": "",
        "currencySymbolAlign": "left",
        "nullValue": "",
        "textAlign": "right",
        "isPercent": false,
        "divideByZeroValue": ""
      },
      {
        "name": "PERCENTAGE",
        "thousandsSeparator": " ",
        "decimalSeparator": ",",
        "decimalPlaces": 2,
        "currencySymbol": "",
        "currencySymbolAlign":...