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>
<div id="pivot-container1"></div>
<div id="pivot-container2"></div>

JavaScript

const json1 = [{
    material: "603122",
    type: "Consultoria",
    account: "4110202009",
    januaryWithIss: 200040,
    januaryWithoutIss: 192038
  }, {
    material: "602752",
    type: "Desenvolvimento",
    account: "4111202009",
    januaryWithIss: 337239.99,
    januaryWithoutIss: 323707.99
  },
  {
    material: "602754",
    type: "Exportação",
    account: "4111202013",
    januaryWithIss: 1050,
    januaryWithoutIss: 1050
  }, {
    material: "603123",
    type: "Intermediação",
    account: "4110912016",
    januaryWithIss: 105400,
    januaryWithoutIss: 101130
  }, {
    material: "602753",
    type: "M&S",
    account: "4111202010",
    januaryWithIss: 2000,
    januaryWithoutIss: 1920
  }
];

const json2 = [{
    material: "602754",
    type: "Exportação",
    account: "4111202013",
    januaryWithIss: -23150,
    januaryWithoutIss: -23150
  }, {
    material: "602753",
    type: "M&S",
    account: "4111202010",
    januaryWithIss: -8000,
    januaryWithoutIss: -7680
  }, {
    material: "603123",
    type: "Intermediação",
    account: "4110912016",
    januaryWithIss: -5500,
    januaryWithoutIss: -5226
  }, {
    material: "603122",
    type: "Consultoria",
    account: "4110202009",
    januaryWithIss: -1373583.59,
    januaryWithoutIss: -1307104.41
  },
  {
    material: "602752",
    type: "Desenvolvimento",
    account: "4111202009",
    januaryWithIss: -8594389.99,
    januaryWithoutIss: -8243857.99
  }
];

function getData() {
  return [...json1, ...json2]
}

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  height: 400,
  report: {
    options: {
      grid: {
        type: "flat",
        showAggregationLabels: false
      }
    },
    dataSource: {
      data: getData(),
      mapping: {
        "material": {
          type: 'string'
        },
        "account": {
          type: 'string'
        },
      }

    },
    slice: {
      rows: [{
      ...