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/",
  toolbar: true,
  global: {
        localization: {
           grid: {
              blankMember: ""
           }
        }
  },
  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"}
      ]
    }
  },
  width: "100%",
  height: 370
});

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;

}