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 pivot1 = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  height: 300,
  beforetoolbarcreated: customizeToolbar,
  reportcomplete: function() {
    adjustToolbarVisibility(pivot1, false);
  }
});

function adjustToolbarVisibility(pivot, isVisible) {
  pivot.toolbar.toolbarWrapper.style.display = isVisible ? "block" : "none";
}

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;
  }
}