JSFiddle - React, Tailwind, and code Playground

by PavithraG

HTML

<script src="https://techorc.in/flexmonster_V2.6.14.js"></script>
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>


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

JavaScript

var pivot = new Flexmonster({
	container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 430,
  toolbar: true,
 report: {
    "formats": [
        {
            "infinityValue": "Infinity",
            "name": "net_sales",
            "decimalSeparator": ".",
            "positiveCurrencyFormat": "$1",
            "currencySymbol": "$",
            "thousandsSeparator": ",",
            "divideByZeroValue": "Infinity",
            "maxDecimalPlaces": -1,
            "decimalPlaces": 0,
            "isPercent": false,
            "nullValue": "",
            "textAlign": "right",
            "maxSymbols": 20
        },
        {
            "infinityValue": "Infinity",
            "name": "avg_check",
            "decimalSeparator": ".",
            "positiveCurrencyFormat": "$1",
            "currencySymbol": " $",
            "thousandsSeparator": ",",
            "divideByZeroValue": "Infinity",
            "maxDecimalPlaces": -1,
            "decimalPlaces": 2,
            "isPercent": false,
            "nullValue": "",
            "textAlign": "right",
            "maxSymbols": 20
        },
        {
            "name": "quantity",
            "decimalSeparator": ".",
            "thousandsSeparator": ",",
            "maxDecimalPlaces": -1,
            "decimalPlaces": 0,
            "textAlign": "right"
        },
        {
            "infinityValue": "Infinity",
            "name": "tran__count",
            "decimalSeparator": ".",
            "positiveCurrencyFormat": "$1",
            "currencySymbol": " ",
            "thousandsSeparator": ",",
            "divideByZeroValue": "Infinity",
            "maxDecimalPlaces": -1,
            "decimalPlaces": 0,
            "isPercent": false,
            "nullValue": "",
            "textAlign": "right",
            "maxSymbols": 20
        }
    ],
    "slice": {
        "measures": [
            {
                "format": "net_sales",
               ...