JSFiddle - React, Tailwind, and code Playground

by yahmed

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

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

JavaScript

var data = [
{
    "Income Band": {
      "type": "string"
    },
        "Gender": {
      "type": "string"
    },
    "Count": {
      "type": "number"
    }
  },
  [
    "0 < 15500",
    "Female",
    6918
  ],
  [
    "0 < 15500",
    "Male",
    8275
  ],
  [
    "0 < 15500",
    "Unknown",
    38
  ],
  [
    "15500 < 31000",
    "Female",
    10753
  ],
  [
    "15500 < 31000",
    "Male",
    12528
  ],
  [
    "15500 < 31000",
    "Unknown",
    67
  ],
  [
    "31000 < 46500",
    "Female",
    8374
  ],
  [
    "31000 < 46500",
    "Male",
    9714
  ],
  [
    "31000 < 46500",
    "Unknown",
    55
  ],
  [
    "46500 < 62000",
    "Female",
    8307
  ],
  [
    "46500 < 62000",
    "Male",
    9924
  ],
  [
    "46500 < 62000",
    "Unknown",
    46
  ],
  [
    "62000 < 77500",
    "Female",
    3093
  ],
  [
    "62000 < 77500",
    "Male",
    3617
  ],
  [
    "62000 < 77500",
    "Unknown",
    18
  ],
  [
    "77500 < 93000",
    "Female",
    5048
  ],
  [
    "77500 < 93000",
    "Male",
    5912
  ],
  [
    "77500 < 93000",
    "Unknown",
    30
  ],
  [
    "93000 < 108500",
    "Female",
    1069
  ],
  [
    "93000 < 108500",
    "Male",
    1207
  ],
  [
    "93000 < 108500",
    "Unknown",
    5
  ],
  [
    "139500 < 155000",
    "Female",
    2306
  ],
  [
    "139500 < 155000",
    "Male",
    2681
  ],
  [
    "139500 < 155000",
    "Unknown",
    13
  ]
];

var slice = {
  "rows": [
    {
      "uniqueName": "Gender",
      "caption": "Gender"
    }
  ],
  "columns": [
    {
      "uniqueName": "Income Band",
      "caption": "Income Band"
    },
    {
      "uniqueName": "[Measures]"
    }
  ],
  "measures": [
    {
      "uniqueName": "Count",
      "caption": "Count",
      "grandTotalCaption": "Count",
      "format": "Count",
      "aggregation": "sum",
      "active": true
    }
  ],
  "expands": {
    "expandAll": true
  }
};


var pivot = new Flexmonster({
	container: "pivot-container",
  componentFolder:...