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://cdn.flexmonster.com/flexmonster.js"></script>

<button onclick="setData()">
  Set Data
</button>
<div id="pivot-container"></div>

JavaScript

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/"
});

var data = [{
  "Category": "Accessories",
  "Size": "262 oz",
  "Color": "red",
  "Destination": "Australia",
  "Business Type": "Specialty Bike Shop",
  "Country": "Australia",
  "Price": 174,
  "Quantity": 225,
  "Discount": 23
}, {
  "Category": "Accessories",
  "Size": "214 oz",
  "Color": "yellow",
  "Destination": "Canada",
  "Business Type": "Specialty Bike Shop",
  "Country": "Canada",
  "Price": 502,
  "Quantity": 90,
  "Discount": 17
}, {
  "Category": "Components",
  "Size": "235 oz",
  "Color": "green",
  "Destination": "Australia",
  "Business Type": "Warehouse",
  "Country": "Australia",
  "Price": 551,
  "Quantity": 1950,
  "Discount": 51
}, {
  "Category": "Components",
  "Size": "307 oz",
  "Color": "white",
  "Destination": "United Kingdom",
  "Business Type": "Warehouse",
  "Country": "Canada",
  "Price": 842,
  "Quantity": 8212,
  "Discount": 55
}, {
  "Category": "Bikes",
  "Size": "334 oz",
  "Color": "red",
  "Destination": "United States",
  "Business Type": "Value Added Reseller",
  "Country": "Canada",
  "Price": 738,
  "Quantity": 35,
  "Discount": 28
}, {
  "Category": "Bikes",
  "Size": "107 oz",
  "Color": "yellow",
  "Destination": "Australia",
  "Business Type": "Value Added Reseller",
  "Country": "France",
  "Price": 8457,
  "Quantity": 35,
  "Discount": 99
}, {
  "Category": "Cars",
  "Size": "121 oz",
  "Color": "white",
  "Destination": "United States",
  "Business Type": "Specialty Bike Shop",
  "Country": "Canada",
  "Price": 18582,
  "Quantity": 58,
  "Discount": 59
}, {
  "Category": "Cars",
  "Size": "18 oz",
  "Color": "green",
  "Destination": "Australia",
  "Business Type": "Specialty Bike Shop",
  "Country": "France",
  "Price": 47120,
  "Quantity": 42,
  "Discount": 100
}];

localStorage.setItem("data", JSON.stringify(data));

function setData() {
  // deside here to refresh or load from cache
  var...