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>

CSS

#fm-pivot-view .fm-grid-view div.fm-cell.highlight-others {
  background-color: #FFB74D !important;
}

JavaScript

let pivot = new Flexmonster({
  container: 'pivot-container',
  componentFolder: 'https://cdn.flexmonster.com/',
  toolbar: true,
  customizeCell: customizeCellFunction,
  global: {
    localization: {
      grid: {
        blankMember: '',
      },
    },
  },
  report: {
    dataSource: {
      data: getData(),
      mapping: {
        isOthers: {
          type: 'property',
          hierarchy: 'country',
        },
        hasOthers: {
          type: 'property',
          hierarchy: 'country_group',
        },
      },
    },
    options: {
      grid: {
        type: 'classic',
      },
    },
    slice: {
      expands: {
        expandAll: true,
      },
      rows: [
        {
          uniqueName: 'country_group',
          sortOrder: ['Europe', 'China', 'US', 'Taiwan', 'Indonesia'],
        },
        {
          uniqueName: 'country',
        },
        {
          uniqueName: 'category'
        }
      ],
      columns: [
        {
          uniqueName: '[Measures]',
        },
      ],
      measures: [
        {
          uniqueName: 'amount',
        },
      ],
    },
  },
});

function customizeCellFunction(cell, data) {
  const isOthers = data.rows.some((row) => row.properties?.isOthers);
  if (isOthers) {
    cell.addClass('highlight-others');
  }
  const hasOthers = data.rows.some((row) => row.properties?.hasOthers);
  if (hasOthers) {
    cell.addClass('highlight-others');
  }
}

function getData() {
  return [
    {
      country_group: 'Europe',
      country: 'Netherlands',
      isOthers: 0,
      amount: 100,
      category: 'A',
    },
    {
      country_group: 'Europe',
      country: 'UK',
      category: 'A',
      isOthers: 0,
      amount: 100,
    },
    {
      country_group: 'Europe',
      country: 'Others',
      category: 'A',
      isOthers: 1,
      amount: 100,
    },
    {
      country_group: 'China',
      country: '',
  ...