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>

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

JavaScript

var pivot = new Flexmonster({
  toolbar: true,
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    dataSource: {
      type: "json",
      data: getRawData()
    },
    slice: {
      rows: [{
        "uniqueName": "Row ID"
      }],
      columns: [{
        "uniqueName": "[Column ID]"
      }],
      measures: [
        {
          "uniqueName": "Volume",
          "aggregation": "differenceofrow"
        }
      ]
    },
    options: {
      showEmptyValues: true
    }
  },
  width: "100%",
  height: 750
});

function getProcessedData() {
  rawData = getRawData();
  for (let entry in rawData) {
    if ((typeof rawData[entry].Value != 'number') && (rawData[entry].Value == '')) {
      rawData[entry].Value = 0;
    }
  }
  return rawData;
}

function getRawData() {
  return [
  	{
      "Row ID": 1,
      "Column ID": 1,
      "Volume": 1000
    },
    {
      "Row ID": 1,
      "Column ID": 2,
      "Volume": 2100
    },
        {
      "Row ID": 1,
      "Column ID": 3,
      "Volume": 3100
    },
    /* Note that we don't have Row ID 2, Column ID 2 */
    {
      "Row ID": 2,
      "Column ID": 2,
      "Volume": 11000
    },
        {
      "Row ID": 2,
      "Column ID": 3,
      "Volume": 21000
    }
  ];
}