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>

<p>Click the <strong>Add condition</strong> button to see the new default formatting styles.</p>

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

CSS

p {
  font-size: 15px;
  line-height: 1.5;
  padding-right: 10px;
  padding-left: 10px;
}

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/data.csv"
    }
  },
  beforetoolbarcreated: function(toolbar) {
    toolbar.defaults.fonts.unshift("'Roboto', sans-serif");
    toolbar.defaults.defaultConditionalFormat = {
      fontFamily: "'Roboto', sans-serif",
      fontSize: "8px",
      color: "#E0F2F1",
      backgroundColor: "#00897B"
    };
  },
  reportcomplete: function() {
    pivot.off("reportcomplete");
    pivot.toolbar.showConditionalFormattingDialog();
  }
});