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://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div id="pivotContainer"></div>

CSS

#fm-toolbar-wrapper {
  display: none;
}

.toolbar-button {
  position: absolute;
  z-index: 11;
  right: 0;
  top: 150px;
  width: 45px;
  height: 45px;
}

@media only screen and (max-width: 680px) {

  #fm-toolbar,
  #fm-toolbar-wrapper {
    height: 95px !important;
  }

  #fm-toolbar-wrapper {
    overflow-x: scroll;
    overflow-y: hidden;
  }

  #fm-toolbar-wrapper #fm-toolbar .fm-dropdown {
    position: fixed !important;
  }
}

JavaScript

var itemIsToolbarHidden = true;

var pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/data.csv"
    }
  },
  beforetoolbarcreated: customizeToolbar,
  ready: function() {
    adjustToolbarVisibility();
    $("#pivotContainer").append('<button class="toolbar-button" onclick="toggleToolbar()">T</button>');

  }
});

function adjustToolbarVisibility() {
  if (!itemIsToolbarHidden) {
    $('#fm-toolbar-wrapper').css({
      display: "block"
    });
    pivot.refresh();
  }
}

function toggleToolbar() {
  if (itemIsToolbarHidden) {
    $('#fm-toolbar-wrapper').css({
      display: "block"
    });
  } else {
    $('#fm-toolbar-wrapper').css({
      display: "none"
    });
  }
  itemIsToolbarHidden = !itemIsToolbarHidden;
  pivot.refresh();
}

function customizeToolbar(toolbar) {
  toolbar.responsiveBreakpoints = [];
  toolbar.showDropdown = function(elem) {
    var menu = elem.querySelectorAll(".fm-dropdown")[0];
    if (menu) {
      menu.style.display = "block";
      if (menu.getBoundingClientRect().right > this.toolbarWrapper.getBoundingClientRect().right) {
        menu.style.right = 0;
        this.addClass(elem, "fm-align-rigth");
      }
      menu.style.marginLeft = -document.querySelector("#fm-toolbar-wrapper").scrollLeft + 'px';
    }
  };
  let tabs = toolbar.getTabs();
  tabs.forEach(function(tab) {
    tab.rightGroup = false;
  });
  toolbar.getTabs = function() {
    return tabs;
  }
}