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-grid-layout #fm-cols-sheet .fm-ui-element .fm-ui-element .fm-row .fm-header-c {
  text-align: right;
}

JavaScript

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  beforetoolbarcreated: customizeToolbar,
  width: "100 %",
  height: "800",
  global: {
    localization: {
      "grid": {
        "blankMember": ""
      }
    }
  },
  report: {
    dataSource: {
      data: getData()
    },
    options: {
      grid: {
        type: "classic",
        showTotals: "off",
        showGrandTotals: "off",
      },
      showAggregationLabels: false,
    },
    formats: [{
        name: "",
        thousandsSeparator: ",",
        decimalSeparator: ".",
        decimalPlaces: 3,
        maxDecimalPlaces: 3,
        maxSymbols: 200,
        currencySymbol: "",
        currencySymbolAlign: "left",
        isPercent: false,
        nullValue: "",
        infinityValue: "Infinity",
        divideByZeroValue: "Infinity",
        textAlign: "right"
      },
      {
        name: "percentDisplay",
        thousandsSeparator: ",",
        decimalSeparator: ".",
        decimalPlaces: 3,
        maxDecimalPlaces: 3,
        maxSymbols: 200,
        currencySymbol: "",
        currencySymbolAlign: "left",
        isPercent: true,
        nullValue: "",
        infinityValue: "Infinity",
        divideByZeroValue: "Infinity",
        textAlign: "right"
      }
    ],
    slice: {
      rows: [{
          uniqueName: "Customer"
        },
        {
          uniqueName: "ShipTo"
        },
        {
          uniqueName: "ShipToCityState"
        },
        {
          uniqueName: "BomDescription"
        },
        {
          uniqueName: "CustomerPartNumber"
        },
        {
          uniqueName: "Packaging"
        },
        {
          uniqueName: "TermsAndPort"
        }
      ],
      columns: [{
        uniqueName: "Quantity",
        sort: "desc"
      }],
      measures: [{
        uniqueName: "CurrentPrice"
      }, ],
      expandAll: true,
    }
  },
});
flexmonster.on('reportcomplete',...