JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

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

CSS

#fm-pivot-view{
  /* not recommended as can impact the scrolling behavior*/
  /* and can cause other broken stylings */
  min-height: 60px!important;
}

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  height: calculatePivotHeight(),
  width: calculatePivotWidth(),
  report: {
    dataSource: {
      data: getData(),
    },
    options: {
      showAggregationLabels: false,
      configuratorButton: false,
      readOnly: true,
      grid: {
        showTotals: "off",
        showGrandTotals: "off",
        showHeaders: false,
        showReportFiltersArea: false,
      },
    },
    slice: {
      reportFilters: [
        {
          uniqueName: "Day",
          filter: {
            members: ["Monday", "Tuesday"],
          },
        },
      ],
      columns: [
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Domains",
          aggregation: "sum",
        },
        {
          uniqueName: "Services",
          aggregation: "sum",
        },
        {
          uniqueName: "Records",
          aggregation: "sum",
        },
        {
          uniqueName: "Days",
          aggregation: "sum",
        },
        {
          uniqueName: "Cost (USD)",
          aggregation: "sum",
          format: "usd",
        },
        {
          uniqueName: "Daily (USD)",
          aggregation: "sum",
          format: "usd",
        },
      ],
    },
    formats: [
      {
        name: "usd",
        thousandsSeparator: ",",
        currencySymbol: "$",
      },
    ],
  },
})
function calculatePivotHeight() {
  let rows = 1; //desired number of data rows
  let height = (rows + 1) * 30;
  return height; //recommended not to set it smaller than 200px
}

function calculatePivotWidth() {
  let columns = 6; //desired number of data columns
  let width = columns * 100 + 30; // extra pixels for the scrollbar
  return width;
}
function...