JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

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="placeInBetweenTwoMeasures()">
    Place New Calculated Value Between Two Measures
</button>
<div id="pivot-container"></div>

JavaScript

var pivot = new Flexmonster({
	container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 430,
  toolbar: true,
  report: {
    dataSource: {
      dataSourceType: "json",
      data: [
      {
        "Product": {"type": "string"},
        "Price": {"type": "number"},
        "Quantity": {"type": "number"}
      },
      {
        "Product": "Some product 1",
        "Price":10,
        "Quantity":10
      },
      {
        "Product": "Some product 2",
        "Price":10,
        "Quantity":11
      },
      {
        "Product": "Some product 3",
        "Price":10,
        "Quantity":12
      }
      ]
    },
    options: {
      filter: {
      	dateFormat: "MM/dd/yyyy"
      }
         
    },
    slice: {
      rows: [{ uniqueName: "Product" }],
      columns: [{ uniqueName: "[Measures]" }],
      measures: [
      	{ uniqueName: "Price"},
        { uniqueName: "Quantity"}
      ],
    }
  }
});

function placeInBetweenTwoMeasures(){
			var measure = {
					"uniqueName": "My New Measure",
					"formula": "sum(\"Price\") * sum(\"Quantity\")",
					"caption": "My New Measure"
			};

			pivot.addCalculatedMeasure(measure);

			var slice = pivot.getReport().slice;
			var measures = pivot.getMeasures();
      
			measures.splice(1, 0, measure);
			slice.measures = measures;
			pivot.runQuery(slice);
		}