JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<button onclick="changeView()">Switch to Aggregation on Supplier</button>
<div id="pivot-container"></div>

JavaScript

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    dataSource: {
      dataSourceType: "json",
      data: getData()
    },
    "slice": {
        "rows": [
            {
                "uniqueName": "Purchaser"
            },
            {
                "uniqueName": "Supplier"
            },
            {
                "uniqueName": "Condition type"
            }
        ],
        "columns": [
            {
                "uniqueName": "[Measures]"
            }
        ],
        "measures": [
            {
                "uniqueName": "Total Turnover supplier",
                "aggregation": "average"
            },
            {
                "uniqueName": "Bonus",
                "aggregation": "sum"
            },
            {
                "uniqueName": "Relative KPI",
                "formula": "sum(\"Bonus\") / average(\"Total Turnover supplier\")",
                "caption": "Relative KPI",
                "format": "-1a8121yewfks00"
            }
        ],
        "expands": {
            "expandAll": true
        }
    },
    "options": {
        "grid": {
            "type": "classic",
            "showTotals": "off",
            "showGrandTotals": "off"
        },
        "showAggregationLabels": false,
        "showAggregations": false
    },
    "formats": [
        {
            "name": "-1a8121yewfks00",
            "decimalPlaces": 2,
            "isPercent": true
        }
    ],
    "tableSizes": {
        "columns": [
            {
                "tuple": [],
                "measure": {
                    "uniqueName": "Total Turnover supplier",
                    "aggregation": "sum"
                },
                "width": 162
            }
        ]
    }
},
  toolbar: true,
  width: "100%",
  height: 370
});

function changeView() {
	var slice = flexmonster.getReport().slice;
  slice.rows = [{
                "uniqueName": "Supplier"
    ...