JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<!-- <link rel="stylesheet" href="https://cdn.flexmonster.com/2.8.7/flexmonster.css"> -->

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

JavaScript

var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 600,
  toolbar: true,
  report: {
    "dataSource": {
        "type": "csv",
        "filename": "https://www.flexmonster.com/fm_uploads/2021/12/data.csv",
        "mapping": {
            "Budget": {
                "type": "number"
            },
            "Encumbrance": {
                "type": "number"
            },
            "Projected": {
                "type": "number"
            },
            "Expense": {
                "type": "number"
            },
            "Adjustment": {
                "type": "number"
            }
         }
    },
    "slice": {
        "rows": [
            {
                "uniqueName": "Fund Name"
            },
            {
                "uniqueName": "Fund Code"
            },
            {
                "uniqueName": "Object Code"
            },
            {
                "uniqueName": "Object Code Name"
            }
        ],
        "columns": [
            {
                "uniqueName": "[Measures]"
            }
        ],
        "measures": [
            {
                "uniqueName": "Budget",
                "aggregation": "sum",
                "format": "-x71hehs518100"
            },
            {
                "uniqueName": "Encumbrance",
                "aggregation": "sum",
                "format": "-6c5u25q4vpi00"
            },
            {
                "uniqueName": "Projected",
                "aggregation": "sum"
            },
            {
                "uniqueName": "Expense",
                "aggregation": "sum",
                "format": "-cor1po0xhin00"
            },
            {
                "uniqueName": "Amount Remaining",
                "formula": "sum(\"Budget\") - sum(\"Encumbrance\") - sum(\"Projected\") - sum(\"Expense\")",
                "caption": "Amount Remaining"
            },
            {
                "uniqueName":...