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

new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  customizeCell: customizeCellFunction,
  report: {
    dataSource: {
      data: getData()
    },
    options: {
      grid: {
        type: "flat",
        showTotals: "off",
        showGrandTotals: "off"
      },
      configuratorActive: false
    },
    slice: {
      columns: [
        {
          uniqueName: "City"
        },
        {
          uniqueName: "Country"
        }, 
        {
          uniqueName: "Category"
        }, 
        {
          uniqueName: "Color"
        }, 
        {
          uniqueName: "Price"
        }, 
        {
          uniqueName: "Discount"
        }
      ]
    }
  },
  toolbar: true,
  width: "100%",
  height: 370
});

function customizeCellFunction(cell, data) {  
  if(data.label === "undefined"){
     cell.text = "";
  }
}

function getData(){
	var jsonData = [
        {
            "Color": {},
            "Price": {type: "number"},
            "Country": {},
            "City": {},
            "Discount": {type: "number"}
        },
        {
            "Color" : "green",
            "Price" : 174,
            "Country" : "Canada",
            "City" : "Toronto",
            "Discount" : 12
        },
        {
            "Price" : 174,
            "Country" : "Canada",
            "City" : "Toronto",
            "Discount" : 0
        },
        {
            "Color" : "red",
            "Price" : 166,
            "Country" : "USA",
            "Discount" : 32
        }
    ];
    return jsonData;

}