JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div id="wrapper">
  <div id="pivotContainer"></div>
</div>

CSS

.fm-empty {
  border-right: none !important;
  border-bottom: none !important;
}

JavaScript

var pivot = new Flexmonster({
  container: 'pivotContainer',
  componentFolder: 'https://cdn.flexmonster.com/',
  toolbar: true,
  width: '100%',
  height: '100%',
  report: {
    dataSource: {
      filename: 'data/data.csv',
    },
    slice: {
      rows: [
        {
          uniqueName: 'Category',
        },
        {
          uniqueName: 'Country',
        },
      ],
      columns: [
        {
          uniqueName: '[Measures]',
        },
      ],
      measures: [
        {
          uniqueName: 'Price',
          aggregation: 'sum',
        },
        {
          uniqueName: 'Quantity',
          aggregation: 'sum',
        },
      ],
    },
  },
});

const MIN_RECOMMENDED_WIDTH = 400;
const MIN_RECOMMENDED_HEIGHT = 300;
const MAX_CUSTOM_WIDTH = 800;
const MAX_CUSTOM_HEIGHT = 800;

let wrapper = document.getElementById('wrapper');

flexmonster.on('reportcomplete', () => {
  flexmonster.off('reportcomplete');

  const toolbar = document.getElementById('fm-toolbar');
  const reportFiltersArea = document.querySelector(
    '#fm-pivot-view > div.fm-ui-element.fm-ui.fm-ui-container.fm-grid-view > div > div.fm-ui-element.fm-ui-hgroup.fm-filters.fm-page-filter',
  );
  const columnHeaders = document.querySelector(
    '#fm-pivot-view > div.fm-ui-element.fm-ui.fm-ui-container.fm-grid-view > div > div.fm-ui-element.fm-resize-handles.fm-cols-resize > div.fm-ui-element.fm-wrapper',
  );
  const rowHeaders = document.querySelector(
    '#fm-pivot-view > div.fm-ui-element.fm-ui.fm-ui-container.fm-grid-view > div > div.fm-ui-element.fm-resize-handles.fm-rows-resize',
  );
  const brandingBar = document.querySelector(
    '#fm-pivot-view > div.fm-ui-element.fm-ui.fm-ui-container.fm-branding-bar.fm-layout-660.fm-layout-520',
  );

  flexmonster.on('aftergriddraw', () => {
    let resWidth = 0;
    let resHeight = 0;
    let col = flexmonster.gridColumnCount();
    let row =...