JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

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

JavaScript

var jsonData = [{
	    "Color": "green",
	    "Country": "Canada",
	    "State": "Ontario",
	    "City": "Toronto",
	    "Price": 174,
	    "Quantity": 22
	  },
	  {
	    "Color": "red",
	    "Country": "USA",
	    "State": "California",
	    "City": "Los Angeles",
	    "Price": 166,
	    "Quantity": 19
	  }
	];

	var pivot = new Flexmonster({
	  container: "pivot-container",
	  componentFolder: "https://cdn.flexmonster.com/",
	  toolbar: true,
	  report: {
	    dataSource: {
	      data: jsonData
	    },
	    slice: {
	      rows: [
          {uniqueName: "Color"},
	        {uniqueName: "[Measures]"}
	      ],
	      columns: [
          {uniqueName: "Country"}
        ],
	      measures: [
          {uniqueName: "Price", aggregation: "sum"}
	      ],
	      reportFilters: [
          {uniqueName: "Color"}
        ]
	    }
	  }
	});