JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivot-container"></div>

JavaScript

let pivot = new Flexmonster({
  container: '#pivot-container',
  componentFolder: 'https://cdn.flexmonster.com/',
  width: '100%',
  height: 550,
  toolbar: true,
  report: {
    dataSource: {
      type: 'api',
      url: apiEndpoint,
      index: 'fm-product-sales',
      mapping: {
        'Business Type': {
          type: 'string',
          folder: 'Industria',
          caption: 'Nome',
        },
        Size: {
          type: 'string',
          folder: 'Industria',
          caption: 'Size',
        },
        Category: {
          type: 'string',
          folder: 'Distribuidor',
          caption: 'Nome',
          uniqueName: 'Category',
        },
        Country: {
          type: 'string',
          folder: 'Distribuidor',
        },
        Color: {
          type: 'string',
          folder: 'Varejo',
          caption: 'Nome',
          uniqueName: 'Color',
        },
        Destination: {
          type: 'string',
          folder: 'Varejo',
        },
        Quantity: {
          type: 'number',
          folder: 'Valores Sellout',
          format: 'amount',
          caption: 'Quantidade Un',
          uniqueName: 'Quantity',
        },
        Price: {
          type: 'number',
          folder: 'Valores Sellout',
        },
        Discount: {
          type: 'number',
          folder: 'Valores Sellout',
        },
      },
    },
    slice: {
      rows: [
        {
          uniqueName: 'Business Type',
        },
        {
          uniqueName: 'Category',
        },
        {
          uniqueName: 'Color',
        },
      ],
      columns: [
        {
          uniqueName: '[Measures]',
        },
      ],
      measures: [
        {
          uniqueName: 'Quantity',
          aggregation: 'sum',
          format: 'amount',
        },
        {
          uniqueName: 'Price',
          aggregation: 'sum',
          format: 'amount',
        },
 ...