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>
<h3>Open Flexmonster in fullscreen for better look</h3>
<div id="pivot-container"></div>

CSS

.fm-grid-title {
  border-color: rgb(255, 205, 86);
  background-color: rgb(255, 205, 86, 0.8);
}

.fm-chart-title {
  border-color: rgba(255, 99, 132);
  background-color: rgba(255, 99, 132, 0.8);
}

#pivot-container .fm-charts-color-1 {
  fill: rgb(255, 99, 132) !important;
}

#pivot-container .fm-charts-color-2 {
  fill: rgb(255, 159, 64) !important;
}

#pivot-container .fm-charts-color-3 {
  fill: rgb(255, 205, 86) !important;
}

#pivot-container .fm-charts-color-4 {
  fill: rgb(75, 192, 192) !important;
}

#pivot-container .fm-charts-color-5 {
  fill: rgb(54, 162, 235) !important;
}

#pivot-container .fm-charts-color-6 {
  fill: rgb(153, 102, 255) !important;
}

#pivot-container .fm-charts-color-7 {
  fill: rgb(201, 203, 207) !important;
}

JavaScript

var pivot = new Flexmonster({
  componentFolder: "https://cdn.flexmonster.com/",
  container: "pivot-container",
  toolbar: true,
  height: 640,
  report: {
    dataSource: {
      type: "csv",
      filename: "https://cdn.flexmonster.com/data/sales.csv",
    },
    options: {
      viewType: "grid_charts",
      fieldListPosition: "right",
      configuratorActive: true,
      showAggregationLabels: false,
      grid: {
        title: "Pivot grid title",
      },
      chart: {
        title: "Pie chart title",
        type: "pie",
        position: "right",
      },
    },
    slice: {
      rows: [
        {
          uniqueName: "Category",
        },
      ],
      columns: [
        {
          uniqueName: "Region",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Revenue",
          aggregation: "Sum",
          format: "currency",
        },
      ],
    },
    formats: [
      {
        name: "currency",
        thousandsSeparator: ",",
        currencySymbol: "$",
      },
    ],
  },
})