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="getTableSizes()">Get table sizes</button>
<button onclick="setTableSizes()">Set table sizes</button>

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

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

CSS

#fm-pivot-view .fm-grid-row,
#fm-pivot-view .fm-grid-row-mobile {
  height: 30px !important;
  min-height: 10px;
}

#fm-pivot-view .fm-grid-column,
#fm-pivot-view .fm-grid-column-mobile {
  width: 90px !important;
  min-width: 90px;
}

#fm-pivot-view .fm-grid-header,
#fm-pivot-view .fm-grid-header-mobile {
  height: 30px !important;
  width: 10px !important;
}

#fm-pivot-view .fm-grid-layout div.fm-cell {
  padding-top: 3px !important;
  padding-bottom: 0 !important;
  font-size: 11px !important;
}

#fm-pivot-view .fm-grid-layout div.fm-sheet-header {
  line-height: 10px !important;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 300,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    slice: {
      rows: [{
        uniqueName: "Category"
      }],
      columns: [{
          uniqueName: "Country",
          filter: {
            exclude: [
              "country.[canada]",
              "country.[united kingdom]"
            ]
          }
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [{
        uniqueName: "Price",
        aggregation: "sum"
      }]
    },
  }
});

function setTableSizes() {
  flexmonster.setTableSizes({
    "columns": [{
        "idx": 0,
        "width": 160
      },
      {
        "tuple": ["country.[germany]"],
        "measure": {
          "uniqueName": "Price",
          "aggregation": "sum"
        },
        "width": 160,
      }
    ],
    "rows": [{
      "tuple": ["category.[cars]"],
      "height": 15
    }]
  });
}

function getTableSizes() {
  let tableSizes = flexmonster.getTableSizes();
  showOutput(JSON.stringify(tableSizes, null, 4));
}

setTableSizes()

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