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="UpdateData()">Update Data</button>
<div id="pivot-container"></div>

JavaScript

var data = [{
        "Color": "red",
        "Week": "W50 - 2022",
        "Quantity": 19
      },
      {
        "Color": "red",
        "Week": "W51 - 2022",
        "Quantity": 19
      },
      {
        "Color": "red",
        "Week": "W52 - 2022",
        "Quantity": 19
      },
      {
        "Color": "green",
        "Week": "W01 - 2023",
        "Quantity": 22
      }
    ];

    var datax10 = [{
        "Color": "red",
        "Week": "W50 - 2022",
        "Quantity": 190
      },
      {
        "Color": "red",
        "Week": "W51 - 2022",
        "Quantity": 190
      },
      {
        "Color": "red",
        "Week": "W52 - 2022",
        "Quantity": 190
      },
      {
        "Color": "green",
        "Week": "W01 - 2023",
        "Quantity": 220
      }
    ];
    var pivot = new Flexmonster({
      container: "pivot-container",
      componentFolder: "https://cdn.flexmonster.com/",
      report: {
        dataSource: {
          data: data
        },
        slice: {
          rows: [{
              uniqueName: "Color"
            },
            {
              uniqueName: "[Measures]"
            }
          ],
          columns: [{
            uniqueName: "Week"
          }],
          measures: [{
            uniqueName: "Quantity",
            aggregation: "sum"
          }]
        }
      }
    });

    function sort(a, b) {
      console.log(a + " " + b);
      return b - a;
    }
    pivot.sortingMethod("Week", sort);


    var currentData = data;

    function UpdateData() {
      if (currentData == datax10) {
        currentData = data;
      } else {
        currentData = datax10;
      }
      this.pivot.updateData({
        data: currentData
      });
    }