JSFiddle - React, Tailwind, and code Playground

by Ian Sadovy

HTML

<script src="https://s3.amazonaws.com/flexmonster/2.2/flexmonster.js"></script>
<script src="https://s3.amazonaws.com/flexmonster/2.3/flexmonster.js"></script>
<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<button onclick="updateData()">
Update
</button>
<button onclick="updateData2()">
Update 2
</button>
<div id="pivot-container"></div>

JavaScript

var pivot = $("#pivot-container").flexmonster({
  componentFolder: "https://s3.amazonaws.com/flexmonster/2.3/",
  width: "100%",
  height: 430,
  toolbar: true
});

var jsonData = [
  {
    "Color":{"type": "string"},
    "M":{"type": "month", 
        "dimensionUniqueName": "Days", 
        "dimensionCaption": "Days", 
        "caption":"Month"},
    "W":{"type": "weekday", 
        "dimensionUniqueName": "Days", 
        "dimensionCaption": "Days", 
        "caption":"Week Day"},
    "Сountry":{"type":"level", 
        "hierarchy": "Geography", 
        "level":"Сountry"},
    "State":{"type":"level", 
        "hierarchy": "Geography", 
        "level":"State", 
        "parent": "Сountry"},
    "City":{"type":"level", 
        "hierarchy": "Geography", 
        "parent": "State"},
    "Price":0,
    "Quantity":{"type": "number"}
  },
  {
    "Color":"green",
    "M":"September",
    "W":"Wed",
    "Сountry" : "Canada",
    "State" : "Ontario",
    "City" : "Toronto",
    "Price":174,
    "Quantity":22
  },
  {
    "Color":"red",
    "M":"March",
    "W":"Mon",
    "Time":"1000",
    "Сountry" : "USA",
    "State" : "California",
    "City" : "Los Angeles",
    "Price":1664,
    "Quantity":19
  },
  {
    "Color":"red",
    "M":"January",
    "W":"Mon",
    "Сountry" : "Canada",
    "State" : "Quebec",
    "City" : "Montreal",
    "Price":1190,
    "Quantity":292
  },
  {
    "Color":"green",
    "D":"04/08/2014",
    "M":"August",
    "W":"Fri",
    "Time":"1000",
    "Сountry" : "USA",
    "State" : "California",
    "City" : "Los Angeles",
    "Price":1222,
    "Quantity":730
  },
  {
    "Color":"white",
    "M":"March",
    "W":"Wed",
    "Сountry" : "USA",
    "State" : "California",
    "City" : "Los Angeles",
    "Price":7941,
    "Quantity":73
  },
  {
    "Color":"red",
    "M":"August",
    "W":"Wed",
    "Сountry" : "Canada",
    "State" : "Ontario",
    "City" : "Toronto",
    "Price":6829,
    "Quantity":19
  },
  {
    "Color":"green",
   ...