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://code.jquery.com/jquery-2.2.4.min.js"></script>
<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/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  width: "100%",
  height: 430,
  toolbar: true,
  report: {
    "dataSource": {
      "type": "csv",
      "filename": "https://s3-eu-west-1.amazonaws.com/statics.send-up.net/Public/Test/weights.csv",
      "mapping": {
        "dateFull": {
          "type": "date"
        },
        "weightIN": {
          "type": "number"
        },
        "weightPiece": {
          "type": "number"
        },
        "weightOUT": {
          "type": "number"
        },
        "weightProduct1": {
          "type": "number"
        },
        "weightProduct2": {
          "type": "number"
        },
        "weightProduct3": {
          "type": "number"
        },
        "weightProduct4": {
          "type": "number"
        },
        "weightProduct5": {
          "type": "number"
        },
        "weightProduct6": {
          "type": "number"
        },
        "sheetType": {
          "caption": "Type",
          "filters": false
        },
        "username": {
          "caption": "Operator"
        },
        "year": {
          "caption": "Year"
        },
        "--PRODUCT_POTENTIAL": {
          "caption": "PRODUCT POTENTIAL",
          "formula": "0.7 * SUM(weightIN,ALL)",
          "type": "number",
          "aggregation": "sum"
        },
        "--PRODUCT_VALUATION_TOTAL": {
          "caption": "Total product valuation",
          "formula": "SUM(weightProduct1, weightProduct2, weightProduct3, weightProduct4, weightProduct5, weightProduct6) / PRODUCT_POTENTIAL",
          "type": "number",
          "aggregation": "sum"
        }
      }
    },
    "slice": {
      "reportFilters": [{
          "uniqueName": "username"
        },
        {
          "uniqueName": "dateFull.Month",
          "caption": "Month"
        },
        {
          "uniqueName": "year",
         ...