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://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://s3.amazonaws.com/flexmonster/2.3/flexmonster.js"></script>

<button onclick="closeFormulaEditor()">close Formula Editor</button>
<div id="pivot"></div>

JavaScript

var pivot = $("#pivot").flexmonster({
        componentFolder: "https://s3.amazonaws.com/flexmonster/2.3/",
        width: "100%",
        height: 350,
        report: {
        	dataSource: {
          	data: getData()
          }
        },
        toolbar: true
    });
            
    function closeFormulaEditor() {
    		pivot.closeFieldsList();
        $("#fm-calculated-view > div.fm-ui.fm-ui-panel > div.fm-ui.fm-ui-toolbar > a:nth-child(1)").click();
    }
    
    function getData() {
    return [
	{
		"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
	},
	{
		"Color" : "blue",
		"Country" : "USA",
		"State" : "California",
		"City" : "Los Angeles",
		"Price" : 0,
		"Quantity" : 19
	}
	]
    }