JSFiddle - React, Tailwind, and code Playground

Data source

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

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

JavaScript

const pivotY = new Flexmonster({
  container: "pivot-container-year",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  height: "300",
  width: "100%",
  report: {
    dataSource: {
      data: getData()
    },
    "slice": {
        "rows": [
            {
                "uniqueName": "Account Type"
            }
        ],
        "columns": [
            {
                "uniqueName": "Year"
            }
        ],
        "measures": [
            {
                "uniqueName": "Deposits",
                "aggregation": "sum",
                "format": "-1243vxhxslns00"
            },
            {
                "uniqueName": "Deposits",
                "aggregation": "differenceofrow",
                "caption": "Variance",
                "format": "-1243vxhxslns00"
            },
            {
                "uniqueName": "Deposits",
                "aggregation": "%differenceofrow",
                "caption": "Variance %",
                "format": "-1243vxhxslns00"
            }
        ]
    },
    "options": {
        "grid": {
            "showTotals": "off",
            "showGrandTotals": "off"
        },
        "showAggregationLabels": false,
        "showHeaders": false
    },
    "formats": [
        {
            "name": "-1243vxhxslns00",
            "decimalPlaces": 0
        }
    ],
    "tableSizes": {
      "columns": [
       {
       "tuple": ["year.[2024]"],
       "measure": {
         "uniqueName": "Deposits",
         "aggregation": "differenceofrow"
       },
       "width": 0
      },
      {
       "tuple": ["year.[2024]"],
       "measure": {
         "uniqueName": "Deposits",
         "aggregation": "%differenceofrow"
       },
       "width": 0
      }
     ]
    }
  }
});

const pivotB = new Flexmonster({
  container: "pivot-container-branch",
  componentFolder: "https://cdn.flexmonster.com/",
  height: "300",
  width:...