Flexmonster - Pivot Table demo

Demos

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div id="pivot-container"></div>

CSS

.fm-custom-cell {
  display: flex !important;
  align-items: center !important;
  font-size: 12px !important;
}

.fm-custom-cell .flag-icon {
  width: 21px !important;
  height: 16px !important;
  margin-left: 0 !important;
  margin-right: 2px !important;
}

#fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-expanded .fm-expanded-icon::before,
#fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-collapsed .fm-collapsed-icon::before {
  top: -2px;
  height: 16px;
}

JavaScript

new Flexmonster({
   container: "pivot-container",
      componentFolder: "https://cdn.flexmonster.com/",
      width: "100%",
      height: 550,
      customizeCell: this.customizeCell,
       
       
      report: {
        dataSource: {
          type: "json",

          data: [
            {
              Status: "Acilian",
              Substatus: "SemiFinished146",
              Value: 129,
              Date: "02-01-2021",
            },
            {
              Status: "Acilian",
              Substatus: "SemiFinished117",
              Value: 186,
              Date: "02-01-2021",
            },
            {
              Status: "Acilian",
              Substatus: "SemiFinished129",
              Value: 1862,
              Date: "02-02-2021",
            },
            {
              Status: "Acilian",
              Substatus: "SemiFinished146",
              Value: 129,
              Date: "05-03-2021",
            },
            {
              Status: "Acilian",
              Substatus: "SemiFinished117",
              Value: 186,
              Date: "05-09-2021",
            },
            {
              Status: "Acilian",
              Substatus: "SemiFinished129",
              Value: 1862,
              Date: "05-4-2021",
            },
            {
              Status: "Acilian",
              Substatus: "SemiFinished146",
              Value: 129,
              Date: "10-09-2021",
            },
            {
              Status: "Acilian",
              Substatus: "SemiFinished117",
              Value: 186,
              Date: "10-05-2021",
            },
            {
              Status: "Acilian",
              Substatus: "SemiFinished129",
              Value: 1862,
              Date: "10-09-2021",
            },
            {
              Status: "THTP",
              Substatus: "SemiFinished146",
              Value: 129,
              Date: "10-06-2021",
            },
            {
              Status: "THTP",
          ...