JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

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

<div>
	<button onclick="refreshCustomData()">Refresh Custom DataSource</button>
</div>

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

JavaScript

var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 500,
  toolbar: true,
  report: {
  	dataSource: {
    	type: "api",
      url: "https://olap.flexmonster.com:9500",
      index: "fm-product-sales"
    },
 		slice: {
    	rows: [
      	{ uniqueName: "Color" },
        { uniqueName: "[Measures]" }
      ],
      columns: [
      	{
        	uniqueName: "Country"
        }
      ],
      measures: [
      	{ uniqueName: "Price" }
      ]
    }
  }
});

function refreshCustomData() {
  pivot.updateData({
    type: "api",
    url: "https://olap.flexmonster.com:9500",
    index: "fm-product-sales"
  },
  {
    keepMembersOrder: true,
    ignoreScroll: false
  });
}