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>

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

JavaScript

var data = [
{
    "Category": "Accessories",
    "Color": "red",
    "Business Type": "Specialty Bike Shop",
    "Region": "Center",
    "Price": 174,
    "Quantity": 225,
    "Discount": 23,
    "Date": "1/12/2011"
  }
];

var pivot = new Flexmonster({
	container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 700,
  report: {
    dataSource: {
      data: data
    },
    slice: {
        rows: [
            { uniqueName: "[Measures]" },
            { uniqueName: "Color" }
        ],
        columns: [
            { uniqueName: "Category" }
        ],
        measures: [
            { uniqueName: "Price" }
        ]
    },
    options: {
    	viewType: "grid_charts",
      drillThrough: false,
      grid: {
      	showFilter: false
      },
      chart: {
      	showFilter: false
      }
    },
    conditions: [
        {
            formula: "if(#value < 1000, 'trueStyle')",
            trueStyle: {
                backgroundColor: "#F5A9A9"
            },
            isTotal: false
        },
        {
            formula: "if(#value > 1000, 'trueStyle')",
            trueStyle: {
                backgroundColor: "#FFFFCC"
            },
            isTotal: false
        },
        {
            formula: "if(#value > 5000, 'trueStyle')",
            trueStyle: {
                backgroundColor: "#CCFFCC"
            },
            isTotal: false
        }
    ]
  }
});

var index = 0;
window.setInterval(function(){
	data.unshift(jsonData[index++]);
  flexmonster.updateData({ 
  	data: data
  });
}, 3000);

var jsonData = [
  {
    "Category": "Accessories",
    "Color": "yellow",
    "Business Type": "Specialty Bike Shop",
    "Region": "East",
    "Price": 502,
    "Quantity": 90,
    "Discount": 17,
    "Date": "1/13/2011"
  },
  {
    "Category": "Accessories",
    "Color": "white",
    "Business Type": "Specialty Bike Shop",
    "Region": "North",
    "Price": 242,
    "Quantity": 855,
    "Discount":...