JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.flexmonster.com/2.3/flexmonster.js"></script>

<div id="pivotContainer"></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 = $("#pivotContainer").flexmonster({
  	componentFolder: "https://cdn.flexmonster.com/2.3/",
		toolbar: true,
		report: {
      options: {
      	configuratorActive: false,
        grid: {
        	showTotals: false,
          showGrandTotals: "off"
        }
      },
			dataSource: {
				data: jsonData
			},
			slice: {
				rows: [
				{ uniqueName: "Color" }
				],
				columns: [
				{ uniqueName: "[Measures]" },
				{ uniqueName: "Country" }
				],
				measures: [
				{
					uniqueName: "Price", 
					aggregation: "sum" 
				},
        {
          uniqueName: "Quantity",
          aggregation: "sum"
        }
				]
			}
		}
	});