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="pivotContainer"></div>

CSS

.fm-svg-icon {
  top: 50%;
  transform: translateY(-50%);
  bottom: unset !important;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/data.csv"
    }
  },
  beforetoolbarcreated: customizeToolbar
});

function customizeToolbar(toolbar) {
  toolbar.createTab = function(data, parent) {
    var tab = document.createElement("li");
    tab.id = data.id;
    var tabLink = document.createElement("a");
    tabLink.setAttribute("role", "menuitem");
    tabLink.tabIndex = 0;
    if (data.hasOwnProperty("class_attr")) {
      tabLink.setAttribute("class", data.class_attr);
    }
    tabLink.setAttribute("href", "javascript:void(0)");

    if (data.icon) {
      var svgIcon = document.createElement("div");
      svgIcon.classList.add("fm-svg-icon");
      svgIcon.setAttribute("aria-hidden", "true");
      svgIcon.innerHTML = data.icon;
      tabLink.appendChild(svgIcon);
    }

		//REMOVE TITLE
    /* var title = document.createElement("span");
    title.classList.add("fm-tab-label");
    this.setText(title, data.title);
    tabLink.appendChild(title); */ 
    
    //ADD TOOLTIP ATTRIBUTE
    tabLink.setAttribute("title", data.tooltip || "");
    
    var _this = this;
    var _handler = typeof data.handler == "function" ? data.handler : this[data.handler];
    var _onShowHandler = typeof data.onShowHandler == "function" ? data.onShowHandler : this[data.onShowHandler];
    if (!this.nullOrUndefined(_handler)) {
      tabLink.onclick =
        function(handler, args) {
          return function() {
            handler.call(_this, args);
          }
        }(_handler, data.args);
    }
    if (!this.nullOrUndefined(_onShowHandler)) {
      tabLink.onmouseover =
        function(handler) {
          return function() {
            handler.call(_this);
          }
        }(_onShowHandler);
    }
    tab.appendChild(tabLink);
    if (data.menu != null && (!this.osUtils.isMobile || data.collapse == true)) {
      var submenu =...