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>

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    "dataSource": {
      "type": "json",
      "data": [{
        "Category": "Accessories",
        "Color": "red",
        "Price": 2350.999
      }, {
        "Category": "Accessories",
        "Color": "black",
        "Price": 2350.551
      },{
        "Category": "Accessories",
        "Color": "blue",
        "Price": 2350.556
      }, {
        "Category": "Accessories",
        "Color": "yellow",
        "Price": 2350.5
      }, {
        "Category": "Accessories",
        "Color": "green",
        "Price": 2350
      }]
    },
    "slice": {
      "rows": [{
          "uniqueName": "Category"
        },
        {
          "uniqueName": "Color"
        }
      ],
      "measures": [{
        "uniqueName": "Price",
        "aggregation": "sum",
        "format": "-n7dav9tilbu00"
      }]
    },
    "options": {
      "grid": {
        "type": "flat"
      }
    },
    "formats": [{
      "name": "-n7dav9tilbu00",
      "maxDecimalPlaces": 10,
      "decimalPlaces": 2,
      "thousandsSeparator": ","
    }]
  }
});