JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

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

JavaScript

let pivot = new Flexmonster({
  container: 'pivot-container',
  componentFolder: 'https://cdn.flexmonster.com/',
  height: 400,
  toolbar: true,
  report: {
    dataSource: {
      type: 'api',
      url: pivotEndpoint,
      index: 'any',
    },
    options: {
      grid: {
        type: 'classic',
        showTotals: 'off',
        showGrandTotals: 'off',
      },
    },
    slice: {
      rows: [
        {
          uniqueName: 'operation',
        },
      ],
      columns: [
        {
          uniqueName: '[Measures]',
        },
        {
          uniqueName: 'filename',
        },
      ],
      measures: [
        {
          uniqueName: 'id',
          aggregation: 'sum',
        },
        {
          uniqueName: 'FormulaSumId',
          formula: 'sum("id")',
          caption: 'FormulaSumId',
          active: false,
        },
      ],
    },
  },
});

function pivotEndpoint(request, successCallback, errorCallback) {
  request = JSON.parse(request);
  var result = null;
  if (request.type == 'handshake') {
  } else if (request.type == 'fields') {
    result = getSchema(request.index);
  } else if (request.type == 'members') {
    result = getMembers(request.index, request.field, request.page);
  } else if (request.type == 'select') {
    result = getSelectResult(request.index, request.query, request.page);
  } else {
    errorCallback('Request type ' + request.type + ' is not implemented.');
  }
  successCallback(result);
}

function getSchema(index) {
  return {
    fields: [
      {
        uniqueName: 'filename',
        type: 'string',
      },
      {
        uniqueName: 'id',
        type: 'number',
      },
      {
        uniqueName: 'tablename',
        type: 'string',
      },
      {
        uniqueName: 'operation',
        type: 'string',
      },
      {
        uniqueName: 'command',
        type: 'string',
      },
      {
        uniqueName:...