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="getMembers()">Get Members</button>

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

<div class="output" id="output">Output will appear here</div>

CSS

.output {
  width: 80%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  background: rgba(242, 242, 242, 1);
  font-family: Menlo, Monaco, "Courier New", Courier, monospace;
  white-space: pre;
  font-size: 16px;
  font-weight: 400;
  overflow-y: scroll;
  margin-top: 20px;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 260,
  report: {
    dataSource: {
      type: "json",
      filename: "data/retail-data.json",
      mapping: {
        "Quantity": {
          type: "number",
        },
        "Price": {
          type: "number",
        },
        "Retail Category": {
          type: "string",
        },
        "Sales": {
          type: "number",
        },
        "Date": {
          type: "year/month/day",
        },
        "Status": {
          type: "string",
        },
        "Product Code": {
          type: "string",
        },
        "Phone": {
          type: "string",
        },
        "Country": {
          type: "string",
          folder: "Location",
        },
        "City": {
          type: "string",
          folder: "Location",
        },
        "CurrencyID": {
          type: "property",
          hierarchy: "Country",
        },
        "Contact Last Name": {
          type: "string",
        },
        "Contact First Name": {
          type: "string",
        },
        "Deal Size": {
          type: "string",
        },
      },
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
          filter: {
            members: [
              "country.[australia]",
              "country.[usa]",
              "country.[japan]",
            ],
          },
        },
        {
          uniqueName: "Status",
        },
      ],
      columns: [
        {
          uniqueName: "Date",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
      ],
  }
  }
});

function getMembers() {
  let members = flexmonster.getMembers("Date");
  showOutput(JSON.stringify(members, null, 2));
}

function showOutput(content) {
  document.getElementById("output").innerText = content;
}