JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivot-container"></div>

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 300,
  toolbar: true,
  beforetoolbarcreated: customizeToolbar,
  ready: function() {
    previousReport = pivot.getReport();
  },
  report: {
    "dataSource": {
      "data": getData()
    }
  }
});

function customizeToolbar(toolbar) { 
    var tabs = toolbar.getTabs(); 
    toolbar.getTabs = function () { 
        tabs.unshift({  
            id: "fm-tab-newtab", 
            title: "Undo", 
            handler: undo,  
            icon: undoIcon 
        }); 
        return tabs; 
    }    
}

let previousReport = null;
let newReport = null;

flexmonster.on('reportchange', function() {
  newReport = pivot.getReport();
});

function undo() {
  pivot.setReport(previousReport);
  previousReport = newReport;
}

function getData() {
  return [{
      "Category": "Accessories",
      "Country": "Canada",
      "Price": 125,
      "Quantity": 100
    },
    {
      "Category": "Accessories",
      "Country": "France",
      "Price": 74,
      "Quantity": 235
    },
    {
      "Category": "Bikes",
      "Country": "USA",
      "Price": 233,
      "Quantity": 184
    }
  ]
}

let undoIcon = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#CCCCCC; transform: scale(0.7) translate(20%, 30%);;}
</style>
<g id="XMLID_2_">
	<path id="XMLID_4_" class="st0" d="M262.5,168.5c-66.1,0-126.6,24.2-172.2,65.2L0,143.4v225.3h225.3L135,278.3
		c34.4-28.9,79.1-47.5,127.5-47.5c88.4,0,163.8,57.7,189.9,137.8l59.6-19.5C477.6,243.9,378.9,168.5,262.5,168.5z"/>
</g>
</svg>`;