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>
<div id="pivot-container"></div>

CSS

#fm-toolbar-wrapper .fm-toolbar-ui .fm-icon-act_add:before {
    content: "\ea0a";
}

JavaScript

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      type: "json",
      data: getData()
    },
    slice: {
      rows: [{
        uniqueName: "Country"
      }, {
        uniqueName: "Category"
      }, {
        uniqueName: "[Measures]"
      }],
      columns: [{
        uniqueName: "Color"
      }],
      measures: [{
        uniqueName: "Price"
      }, {
        uniqueName: "Quantity"
      }],
    },
    options: {
      configuratorActive: false
    }
  },
  width: "100%",
  height: 370,
  beforetoolbarcreated: customizeToolbar
});

//SVG for Flexmonster icons that resemble "expand" and "collapse":
var iconSet = {
  "arrowDown": `<svg id="icon-arrow_down" viewBox="0 0 32 32">
<path d="M16 23.333l9.333-13.333h-18.667l9.333 13.333z"></path>
</svg>`,
  "arrowRight": `<svg id="icon-arrow_right" viewBox="0 0 32 32">
<path d="M22.667 16.667l-13.333-9.333v18.667l13.333-9.333z"></path>
</svg>`,
  "arrowUp": `<symbol id="icon-arrow_up" viewBox="0 0 32 32">
<path d="M16 10l-9.333 13.333h18.667l-9.333-13.333z"></path>
</symbol>`,
  "plus": `<svg id="icon-plus1" viewBox="0 0 32 32">
<path d="M17.231 9.282c0-0.68-0.551-1.231-1.231-1.231s-1.231 
0.551-1.231 1.231v6.154h-6.154c-0.68 0-1.231 0.551-1.231 
1.231s0.551 1.231 1.231 1.231h6.154v6.154c0 0.68 0.551 1.231 
1.231 1.231s1.231-0.551 1.231-1.231v-6.154h6.154c0.68 0 
1.231-0.551 1.231-1.231s-0.551-1.231-1.231-1.231h-6.154v-6.154z"></path>
</svg>`,
  "minus": `<svg id="icon-minus" viewBox="0 0 32 32">
<path d="M7.385 16.667c0-0.68 0.551-1.231 
1.231-1.231h14.769c0.68 0 1.231 0.551 1.231 
1.231s-0.551 1.231-1.231 1.231h-14.769c-0.68 
0-1.231-0.551-1.231-1.231z"></path>
</svg>`,
  "rollUp": `<svg id="icon-act_roll_up" viewBox="0 0 32 32">
<path d="M8.54 21.205c-0.298 0.297-0.78 0.297-1.077
0s-0.298-0.78 0-1.078l7.999-7.999c0.148-0.148 0.341-0.222 
0.534-0.223 0.196-0.001 0.394 0.073 0.543 0.223l7.999...