JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

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

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

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    options: {
      grid: {
        type: "flat",
        showAggregationLabels: false
      }
    },
    dataSource: {
      data: getData(),
       mapping: {
        "material": {
          type: 'string'
        },
        "account": {
          type: 'string'
        },
      }
    },
    slice: {
      rows: [{
          uniqueName: "material",
          caption: "Material",
        },
        {
          uniqueName: "type",
          caption: "Tipo",
        }
      ],
      columns: [{
        "uniqueName": "[Measures]"
      }],
      measures: [{
          uniqueName: 'januaryWithIss',
          caption: 'Janeiro com ISS',
          format: 'RealFormat',
        },
        {
          uniqueName: 'januaryWithoutIss',
          caption: 'Janeiro sem ISS',
          format: 'RealFormat',
        },
        // More Months
      ]
    },
    "formats": [{
        "name": "RealFormat",
        "thousandsSeparator": ".",
        "decimalSeparator": ",",
        "decimalPlaces": 2,
        "currencySymbol": "",
        "currencySymbolAlign": "left",
        "nullValue": "",
        "textAlign": "right",
        "isPercent": false
      },
      {
        "name": "PercentFormat",
        "decimalPlaces": 2,
        "currencySymbolAlign": "left",
        "nullValue": "",
        "textAlign": "right",
        "isPercent": true
      }
    ],
  }
});


function getData() {
  return [{
    material: "602753",
    type: "M&S",
    account: "4111202010",
    januaryWithIss: 2000,
    januaryWithoutIss: 1920
  }, {
    material: "603123",
    type: "Intermediação",
    account: "4110912016",
    januaryWithIss: 105400,
    januaryWithoutIss: 101130
  }, ]
}