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>

<div id="pivot-container">The component will appear here</div>

<div class="report">

  <h1>
    INCOME STATEMENT
  </h1>
  <h4>
    For Year Ended September 28, 2019(In thousands)
  </h4>
  <div class="table">
    <div class='row'>
      <span>Total sales</span>
      <span id="v0">0</span>
    </div>
    <div class='row'>
      <span>Total quantity</span>
      <span id="v1">0</span>
    </div>
  </div>
</div>

CSS

.report {
  width: 80%;
  margin: 0 auto;
  margin-top: 20px;
  padding: 20px;
  background: rgba(242, 242, 242, 1);
  font-size: 16px;
  font-weight: 600;
  overflow-y: auto;
  text-align: center;
}

.table {
  display: "flex";
  flex-direction: "column";
  padding: 15px;

}

.row {
  display: "flex";
  flex-direction: "row";
  justify-content: "between";
  text-align: left;
  border-bottom: 1px dashed #555;
  padding: 5px;
}


#v0, #v1{
  float: right;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  height: 250,
  report: {
    dataSource: {
      filename: 'data/data.csv'
    },
    slice: {
      rows: [{
        uniqueName: "Color",
        filter: {
          members: [
            "color.[blue]",
            "color.[green]"
          ]
        }
      }],
      columns: [{
          uniqueName: "Category",
          filter: {
            members: [
              "category.[accessories]",
              "category.[components]"
            ]
          }
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [{
          "uniqueName": "Price"
        },
        {
          "uniqueName": "Quantity"
        }
      ]
    }
  }
});
flexmonster.on("reportcomplete", function() {
  flexmonster.off("reportcomplete");
  flexmonster.getData({}, getDataHandler, getDataHandler);
})


function getDataHandler(data) {
  showOutput(data.data[0]);
}

function showOutput(values) {
  document.getElementById("v0").innerText = "$ " + values["v0"].toLocaleString();
  document.getElementById("v1").innerText = "$ " + values["v1"].toLocaleString();
}