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://cdn.flexmonster.com/flexmonster.js"></script>

<button onclick="updateData()">Update data</button>
<div id="pivot-container">The component will appear here</div>

JavaScript

var pivot = new Flexmonster({
	container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/"
});

pivot.on('runningquery', function () {
  alert('Query is running!');
});

pivot.on('querycomplete', function () {
  alert('Query is complete!');
});

pivot.on('queryerror', function () {
  alert('Query error!');
});

pivot.on('loadingolapstructure', function () {
  alert('Loading olap structure!');
});

pivot.on('olapstructureloaded', function () {
  alert('Olap structure loaded!');
});

pivot.on('olapstructureerror', function () {
  alert('Error with olap structure!');
});

function updateData() {
  pivot.updateData({
    dataSourceType: 'microsoft analysis services',
    proxyUrl: 'http://olap.flexmonster.com/olap/msmdpump.dll',
    dataSourceInfo: 'Provider=MSOLAP; Data Source=extranet;', 
    catalog: 'Adventure Works DW Standard Edition', 
    cube: 'Adventure Works'
  })
}