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',
  toolbar: true,
  componentFolder: 'https://cdn.flexmonster.com/',
  height: 400,
  report: {
    dataSource: {
      type: 'api',
      url: pivotEndpoint,
      index: 'INDEX',
      mapping: { filename: { caption: 'filename' } },
    },
    slice: {
      rows: [{ uniqueName: 'filename' }],
      columns: [{ uniqueName: 'operation' }, { uniqueName: '[Measures]' }],
      measures: [
        { uniqueName: 'id', aggregation: 'min', format: '-1i1i64la47eq0' },
        { uniqueName: 'id', aggregation: 'differenceofmin' },
      ],
    },
  },
});

/* ---------- Responses ---------- */

// Example schema: "differenceofmin" is declared as a custom aggregation for number fields
const fieldsResponse = {
  fields: [
    { uniqueName: 'filename', type: 'string' },
    { uniqueName: 'operation', type: 'string' },
    { uniqueName: 'id', type: 'number' },
  ],
  aggregations: {
    any: ['count', 'distinctcount'],
    date: ['count', 'distinctcount', 'min', 'max'],
    number: [
      'sum',
      'average',
      'count',
      'distinctcount',
      'min',
      'max',
      'differenceofmin',
    ],
  },
  sorted: false,
};

const membersResponses = {
  filename: {
    members: [
      { id: 'test', value: 'test' },
      { id: 'test 1', value: 'test 1' },
      { id: 'test 2', value: 'test 2' },
    ],
    sorted: true,
    pageTotal: 1,
    page: 0,
    nextPageToken: null,
  },
  operation: {
    members: [
      { id: 'file ops', value: 'file ops' },
      { id: 'test console', value: 'test console' },
    ],
    sorted: true,
    pageTotal: 1,
    page: 0,
    nextPageToken: null,
  },
};

const selectResponse = {
  fields: null,
  hits: null,
  aggs: [
    { keys: {}, values: { id: { min: 117 } } },
    { keys: { filename: 'test 2' }, values: { id: { min: 119 } } },
    { keys: { filename: 'test' }, values: { id: { min: 122...