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="update()">Change the data set</button>
<div id="pivot-container"></div>

JavaScript

var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      data: getDataNumeric()
    },
    slice: {
      rows: [{
        uniqueName: "Month"
      }],
      measures: [{
          uniqueName: "LeftWrist",
          caption: "Left Wrist"
        },
        {
          uniqueName: "RightWrist",
          caption: "Right Wrist"
        },
        {
          uniqueName: "RightElbow",
          caption: "Right Elbow"
        },
        {
          uniqueName: "Calculated Total",
          formula: "sum('LeftWrist') + sum('RightWrist') + sum('RightElbow')"
        }
      ]
    }
  }
});

//Using 1 and 0 as values
function getDataNumeric() {
  return [{
      Month: "January",
      LeftWrist: 1,
      RightWrist: 0,
      RightElbow: 1
    },
    {
      Month: "December",
      LeftWrist: 1,
      RightWrist: 1,
      RightElbow: 0
    },
    {
      Month: "November",
      LeftWrist: 1,
      RightWrist: 0,
      RightElbow: 1
    }
  ]
}

//Usaing "Yes" and "" as values
function getDataString() {
  return [{
      Month: "January",
      LeftWrist: "Yes",
      RightWrist: "",
      RightElbow: "Yes"
    },
    {
      Month: "December",
      LeftWrist: "Yes",
      RightWrist: "Yes",
      RightElbow: ""
    },
    {
      Month: "November",
      LeftWrist: "Yes",
      RightWrist: "",
      RightElbow: "Yes"
    }
  ]
}

function update() {
  flexmonster.removeCalculatedMeasure("Calculated Total");
  flexmonster.updateData({
    data: getDataString()
  });
  flexmonster.addCalculatedMeasure({
    uniqueName: "Calculated Total",
    formula: "count('LeftWrist') + count('RightWrist') + count('RightElbow')",
    "active": true
  });
}