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

/* Charts Style  */

.fm-charts-color-1 {
  fill: #ffa600 !important;
}

.fm-charts-color-2 {
  fill: #7eae26 !important;
}

.fm-charts-color-3 {
  fill: #00a45a !important;
}

.fm-charts-color-4 {
  fill: #df3800 !important;
}

.fm-charts-color-5 {
  fill: #e95800 !important;
}

.fm-charts-color-6 {
  fill: #ffa600 !important;
}

JavaScript

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 800,
  toolbar: true,
  report: {
    dataSource: {
      data: getData()
    },
    slice: {
        rows: [
            {
                uniqueName: "Market Segments"
            }
        ],
        columns: [
            {
                uniqueName: "Channel Segments"
            },
            {
                uniqueName: "[Measures]"
            }
        ],
        measures: [
            {
                uniqueName: "Room Nights",
                aggregation: "sum",
                format: "number"
            },
            {
                uniqueName: "Average Daily Rate",
                aggregation: "sum",
                format: "currency"
            },
            {
                uniqueName: "Mix",
                aggregation: "sum",
                format: "percentage"
            }
        ]
    },
    options: {
        viewType: "grid_charts",
        showAggregationLabels: false,
        grid: {
            showFilter: false
        },
        chart: {
            type: "pie",
            showAllLabels: true,
            activeMeasure: {
                uniqueName: "Mix",
                aggregation: "sum"
            }
        }
    },
    formats: [
        {
            name: "percentage",
            thousandsSeparator: ",",
            /* currencySymbol: "%", */
            isPercent: true,
            decimalPlaces: 0,
        },
        {
            name: "number",
            thousandsSeparator: ","
        },
        {
            name: "currency",
            thousandsSeparator: ",",
            decimalPlaces: 2,
            currencySymbol: "$"
        }
    ],
  }
});


function getData() {
  return [{
      "Channel Segments": {
        "type": "level",
        "hierarchy": "Channel Segments",
        "level": "Channel Segments"
      },
      "Channel": {
        "type": "level",
    ...