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 id="printAll">Print All</button>
<div id="page1">
  <div class="row">
    <div class="title">Sales Trend</div>
    <div id="pivot-container-1"></div>
  </div>
</div>
<div id="page2">
  <div class="row">
    <div class="col">
      <div class="title">Sales by Category</div>
      <div id="pivot-container-2"></div>
    </div>
    <div class="col" style="float:right">
      <div class="title">Sales by Region</div>
      <div id="pivot-container-3"></div>
    </div>
  </div>
  <div class="row">
    <div class="title">Sales Data</div>
    <div id="pivot-container-4"></div>
  </div>
</div>

CSS

@media screen {
  #page2 {
    display: none;
  }
}
    
    
.title {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 5px;
  font-size: 15px;
}

.col {
  width: 49%;
  display: inline-block;
}

JavaScript

document.getElementById('printAll').onclick=function(){
			document.getElementById("page2").style.display = "initial";
      
      pivot2.on('aftergriddraw', function () {
				pivot2.off('aftergriddraw');
        ready(0);
			});
      pivot2.on('afterchartdraw', function () {
				pivot2.off('afterchartdraw');
        ready(0);
			});
      
      pivot3.on('aftergriddraw', function () {
				pivot3.off('aftergriddraw');
        ready(1);
			});
      pivot3.on('afterchartdraw', function () {
				pivot3.off('afterchartdraw');
        ready(1);
			});
      
      pivot4.on('aftergriddraw', function () {
				pivot4.off('aftergriddraw');
        ready(2);
			});
      pivot4.on('afterchartdraw', function () {
				pivot4.off('afterchartdraw');
        ready(2);
			});

			pivot2.refresh();
			pivot3.refresh();
			pivot4.refresh();
};

var whoIsReady = [0,0,0];

function ready(idx) {
  whoIsReady[idx] = 1;
  if (allReady()) readyToPrint();
}

function allReady() {
	var _allReady = true;
  for (var i = 0; i < whoIsReady.length; i++) {
  	_allReady = (whoIsReady[i] == 1);
    if (!_allReady) break;
  }
  return _allReady;
}

function readyToPrint() {
  window.print();
  document.getElementById("page2").style.display = "none";
}
    
var pivot1 = new Flexmonster({
  container: "#pivot-container-1",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    dataSource: {
      dataSourceType: "json",
      data: getData()
    },
    slice: {
      rows: [{
        uniqueName: "Date.Year"
      }],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Price"
      }],
    },
    options: {
      viewType: "charts",
      configuratorActive: false,
      configuratorButton: false,
      chart: {
        type: "line",
        showMeasures: false,
        showFilter: false,
      }
    }
  },
  height: 220
});

var pivot2 = new Flexmonster({
  container: "#pivot-container-2",
  componentFolder:...