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"
	      }]
	    }
	  }
	});

	pivot.customizeContextMenu(function(items, data, viewType) {
	  if (data.type == "header" && data.rowIndex == -1 && data.columnIndex == -1)
	    items.push({
	      label: "Add to Report Filters",
	      handler: function() {
	        var slice = pivot.getReport().slice;
	        if (slice.reportFilters)
	          slice.reportFilters.push({
	            "uniqueName": data.label
	          });
	        else {
	          slice.reportFilters = [];
	          slice.reportFilters.push({
	            "uniqueName": data.label
	          });
	        }
	        pivot.runQuery(slice);
	      }
	    });
	  return items;
	});