JSFiddle - React, Tailwind, and code Playground

Data source

by Flexmonster Pivot Table

HTML

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

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

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

.vertical-text {
  writing-mode: vertical-rl !important;
  transform: rotate(180deg) !important;
}

/* Increase max cell height to fit vertical text */
#fm-pivot-view .fm-grid-row,
#fm-pivot-view .fm-grid-row-mobile {
  max-height: 300px !important; 
}

JavaScript

let pivot = new Flexmonster({
  container: 'pivot-container',
  componentFolder: 'https://cdn.flexmonster.com/',
  toolbar: true,
  customizeCell: rotateMembers,
  report: {
    dataSource: {
      filename: 'data/data.csv',
    },
    slice: {
      rows: [
        {
          uniqueName: 'Color',
        },
        {
          uniqueName: '[Measures]',
        },
      ],
      columns: [
        {
          uniqueName: 'Country',
        },
      ],
      measures: [
        {
          uniqueName: 'Price',
          aggregation: 'sum',
        },
      ],
    },
  },
})

function rotateMembers(cell, data) {
  // Show vertical text for "Country" members
  if (data.hierarchy && data.hierarchy.uniqueName === 'Country') {
    cell.addClass('vertical-text')
  }
  // Show vertical text for "Grand Total" cell
  if (data.isGrandTotal && data.type === 'header' && data.columnIndex !== 0) {
    cell.addClass('vertical-text')
  }
}