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

CSS

.fm-custom-cell {
  display: flex !important;
  align-items: center !important;
  font-size: 12px !important;
}

.fm-custom-cell .flag-icon {
  width: 21px !important;
  height: 16px !important;
  margin-left: 0 !important;
  margin-right: 2px !important;
}

#fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-expanded .fm-expanded-icon::before, 
#fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-collapsed .fm-collapsed-icon::before {
  top: -2px;
  height: 16px;
}

JavaScript

var template = {
  "dataSource": {
    "type": "json",
    "mapping": {
      "FlyerId": {
        "caption": "Ads",
        "dimensionUniqueName": "Measures",
        "type": "number",
        "uniqueName": "FlyerId"
      },
      "PageDetailId": {
        "caption": "Products",
        "dimensionUniqueName": "Measures",
        "type": "number",
        "uniqueName": "PageDetailId"
      },
      "AdBlockId": {
        "caption": "AdBlocks",
        "dimensionUniqueName": "Measures",
        "type": "number",
        "uniqueName": "AdBlockId"
      },
      "Year": {
        "caption": "Year",
        "dimensionUniqueName": "Dates & Periods",
        "type": "number",
        "uniqueName": "Year"
      },
      "Quarter": {
        "caption": "Quarter",
        "dimensionUniqueName": "Dates & Periods",
        "type": "string",
        "uniqueName": "Quarter"
      },
      "Month": {
        "caption": "Month",
        "dimensionUniqueName": "Dates & Periods",
        "type": "string",
        "uniqueName": "Month"
      },
      "MonthOfYear": {
        "caption": "Month Of Year",
        "dimensionUniqueName": "Dates & Periods",
        "type": "string",
        "uniqueName": "MonthOfYear"
      },
      "DateRange": {
        "caption": "Week (Sun. - Sat.)",
        "dimensionUniqueName": "Dates & Periods",
        "type": "string",
        "uniqueName": "DateRange"
      },
      "DateRange1": {
        "caption": "Week (Mon. - Sun.)",
        "dimensionUniqueName": "Dates & Periods",
        "type": "string",
        "uniqueName": "DateRange1"
      },
      "DateRange2": {
        "caption": "Week (Tue. - Mon.)",
        "dimensionUniqueName": "Dates & Periods",
        "type": "string",
        "uniqueName": "DateRange2"
      },
      "DateRange3": {
        "caption": "Week (Wed. - Tue.)",
        "dimensionUniqueName": "Dates & Periods",
        "type": "string",
        "uniqueName": "DateRange3"
      },
      "DateRange4": {
        "caption":...