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

const pivot = new Flexmonster({
  container: 'pivot-container',
  componentFolder: 'https://cdn.flexmonster.com/',
  toolbar: true,
  report: {
    dataSource: {
      data: getData(),
      mapping: {
        timekey: {
          type: 'date string',
        },
        industry:{
          hierarchy:"h"
        },
        subindustry:{
          hierarchy:'h',
          parent:"industry"
        }
      },
    },
    slice: {
      expands: {
        expandAll: true,
      },
      drills:{
        drillAll: true //for multilevel hierarchies drills are used instead of expands
      },
      rows: [
        {
          uniqueName: 'h',
          sort: 'unsorted',
        }
      ],
      columns: [
        { uniqueName: 'timekey' },
        {
          uniqueName: '[Measures]',
        },
      ],
      measures: [
        {
          uniqueName: 'value',
          aggregation: 'sum',
        },
      ],
    },
  },
})

function getData() {
  return [
    {
      timekey: '2025-06-30T00:00:00',
      subindustry: 'Apple',
      industry: 'Alpha-1',
      value: 1000.5,
    },
    {
      timekey: '2025-06-30T00:00:00',
      subindustry: 'Banana',
      industry: 'Alpha-1',
      value: -900.2,
    },
    {
      timekey: '2025-06-30T00:00:00',
      subindustry: 'Orange',
      industry: 'Alpha-1',
      value: 500.1,
    },
    {
      timekey: '2025-06-30T00:00:00',
      subindustry: 'Grapefruit',
      industry: 'Alpha-2',
      value: -200.5,
    },
    {
      timekey: '2025-06-30T00:00:00',
      subindustry: 'Banana',
      industry: 'Alpha-2',
      value: 100.3,
    },
    {
      timekey: '2025-06-30T00:00:00',
      subindustry: 'Coconut',
      industry: 'Alpha-2',
      value: 60.8,
    },
  ]
}