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": "W1",
        "Quantity": 1,
        "Quantity2": 2
      },
      {
        "Color": "red",
        "Week": "W2",
        "Quantity": 1,
        "Quantity2": 2
      },
      {
        "Color": "red",
        "Week": "W3",
        "Quantity": 1,
        "Quantity2": 2
      },
      {
        "Color": "red",
        "Week": "W4",
        "Quantity": 1,
        "Quantity2": 2
      }
    ];

    var data2 = [{
      "Color": "red",
      "Week": "W1",
      "Quantity": 10,
      "Quantity2": 20
    }, ];
    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"
            }, {
              uniqueName: "Quantity2",
              aggregation: "sum"
            }, {
              "uniqueName": "rt1",
              "formula": "runningtotalsofrow(\"Quantity\")"
            }, {
              "uniqueName": "rt2",
              "formula": "runningtotalsofrow(\"Quantity2\")"
            }

          ]
        }
      }
    });

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


    function UpdateData() {
      this.pivot.updateData({
        data: data2
      }, {
        partial: true
      });
    }