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 class="tab">
  <button class="tablinks" onclick="openCity(event, 'report1')">Report1</button>
  <button class="tablinks" onclick="openCity(event, 'report2')">Report2</button>
</div>

<div id="pivot-container"></div>

CSS

/* Style the tab */
div.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
div.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

JavaScript

function openCity(evt, cityName) {
  var tablinks;
  if (cityName == 'report1') {
    pivot.setReport(report1);
  } else {
    pivot.setReport(report2);
  }

  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  evt.currentTarget.className += " active";
}

var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    options: {
      fieldListPosition: "right"
    },
    dataSource: {
      filename: "data/data.csv"
    }
  },
  reportcomplete: function() {
    pivot.openFieldsList();
  }
});

var report1 = {
  options: {
    fieldListPosition: "right"
  },
  dataSource: {
    filename: "data/sales.csv"
  }
};

var report2 = {
  options: {
    fieldListPosition: "right"
  },
  dataSource: {
    filename: "data/data.csv"
  }
};