JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<button onclick="setData1()"> setData1</button>
<button onclick="setData2()"> setData2</button>

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

JavaScript

var jsonData1 = [{
	    "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": "red",
	    "Country": "USA",
	    "State": "California",
	    "City": "Los Angeles",
	    "Price": 166,
	    "Quantity": 11
	  },
	  {
	    "Color": "blue",
	    "Country": "USA",
	    "State": "California",
	    "City": "Los Angeles",
	    "Price": 152,
	    "Quantity": 16
	  }
	];
	var jsonData2 = [{
	    "Color": "green",
	    "Country": "Canada",
	    "State": "Ontario",
	    "City": "Toronto",
	    "Price": 174,
	    "Quantity": 22
	  },
	  {
	    "Color": "blue",
	    "Country": "USA",
	    "State": "California",
	    "City": "Los Angeles",
	    "Price": 152,
	    "Quantity": 16
	  }
	];
  
  var pivotFlex = {
	  container: "pivot-container",
	  componentFolder: "https://cdn.flexmonster.com/",
	  toolbar: true,
	  report: {
	    dataSource: {
	      data: jsonData1
	    },
	    slice: {
	      measures: [{
	        uniqueName: "Price",
	        aggregation: "sum"
	      }],
	      rows: [{
	        filter: {
	          members: ["color.[red]"]
	        },
	        uniqueName: "Color"
	      }]
	    }
	  }
	}

	var pivot = new Flexmonster(pivotFlex);

	function setData1() {
  let _pivotFlex = pivotFlex
  _pivotFlex.report.dataSource.data = jsonData1
	  pivot.setReport(_pivotFlex.report);
	}

	function setData2() {
  let _pivotFlex = pivotFlex
  _pivotFlex.report.dataSource.data = jsonData2
	  pivot.setReport(_pivotFlex.report);
	}