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 = [
  {
    "Gender": {
      "type": "string"
    },
    "Income Band": {
      "type": "string"
    },
    "MaritalStatus": {
      "type": "string"
    },
    "Count": {
      "type": "number"
    }
  },
  [
    "Female",
    "93000 < 108500",
    "Divorced",
    109
  ],
  [
    "Female",
    "93000 < 108500",
    "Married",
    207
  ],
  [
    "Female",
    "93000 < 108500",
    "Remarried",
    113
  ],
  [
    "Female",
    "93000 < 108500",
    "Single",
    640
  ],
  [
    "Female",
    "139500 < 155000",
    "Divorced",
    686
  ],
  [
    "Female",
    "139500 < 155000",
    "Married",
    483
  ],
  [
    "Female",
    "139500 < 155000",
    "Remarried",
    219
  ],
  [
    "Female",
    "139500 < 155000",
    "Single",
    918
  ],
  [
    "Male",
    "93000 < 108500",
    "Divorced",
    111
  ],
  [
    "Male",
    "93000 < 108500",
    "Married",
    242
  ],
  [
    "Male",
    "93000 < 108500",
    "Remarried",
    129
  ],
  [
    "Male",
    "93000 < 108500",
    "Single",
    723
  ],
  [
    "Male",
    "139500 < 155000",
    "Divorced",
    801
  ],
  [
    "Male",
    "139500 < 155000",
    "Married",
    556
  ],
  [
    "Male",
    "139500 < 155000",
    "Remarried",
    276
  ],
  [
    "Male",
    "139500 < 155000",
    "Single",
    1048
  ],
  [
    "Unknown",
    "93000 < 108500",
    "Divorced",
    1
  ],
  [
    "Unknown",
    "93000 < 108500",
    "Married",
    3
  ],
  [
    "Unknown",
    "93000 < 108500",
    "Single",
    1
  ],
  [
    "Unknown",
    "139500 < 155000",
    "Divorced",
    4
  ],
  [
    "Unknown",
    "139500 < 155000",
    "Married",
    1
  ],
  [
    "Unknown",
    "139500 < 155000",
    "Remarried",
    1
  ],
  [
    "Unknown",
    "139500 < 155000",
    "Single",
    7
  ]
];

var slice = {
  "rows": [
    {
      "uniqueName": "Income Band",
      "caption": "Income Band"
    },
    {
      "uniqueName": "MaritalStatus",
      "caption": "MaritalStatus"
    }
  ],
  "columns": [
    {
 ...