JSFiddle - React, Tailwind, and code Playground

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="pivotContainer"></div>

CSS

.wrapped {
  white-space: normal !important;
  
 /*  height: 45px !important;
  width: 100px !important; */
}

JavaScript

var pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  customizeCell: customizeCellFunction,
  report: {
    dataSource: {
      data: getData()
    },
    slice: {
      rows: [{
        uniqueName: "Category"
      }],
      columns: [{
          uniqueName: "Date"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [{
        uniqueName: "Price"
      }]
    }
  }
});

function customizeCellFunction(cell, data) {
  if (data.columnIndex === 2) {
    let i;
    for (i = 0; i < cell.classes.length; i++) {
      if (cell.classes[i] == "fm-header-c") {
        cell.addClass("wrapped");
      }
    }
  }
}

flexmonster.on("reportcomplete", function() {
  changeTableSizes();
});

function changeTableSizes() {
  flexmonster.setTableSizes({
    "columns": [{
        "tuple": ["Date"],
        "width": 400
      },
      {
        "idx": 3,
        "width": 360
      }
    ],
    "rows": [{
      "tuple": ["Category"],
      "height": 85
    },
    
    ]
  });
}

function getData() {
  return [{
      "Category": "Category 1",
      "Date": "2020-10-12 - 2020-10-18",
      "Price": 45673
    },
    {
      "Category": "Category 2",
      "Date": "2020-10-12 - 2020-10-18",
      "Price": 45673
    },
    {
      "Category": "Category 3",
      "Date": "2020-10-19 - 2020-10-25",
      "Price": 45673
    },
    {
      "Category": "Category 4",
      "Date": "2020-10-19 - 2020-10-25",
      "Price": 45673
    }
  ]
}