JSFiddle - React, Tailwind, and code Playground

Slice configuration

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div id="pivot-container"></div>

<div id="categories">
</div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

#categories {
  z-index: 9999 !important;
  display: none;
  background: white;
  border: 1px solid #ddd;
  color: #000;
  font-size: 12px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height: 200px;
  overflow-y: auto;
}

.category-item {
  padding: 6px 10px;
  cursor: pointer;
}

.category-item:hover {
  background: #f2f2f2;
}

JavaScript

let pivot = new Flexmonster({
  container: 'pivot-container',
  componentFolder: 'https://cdn.flexmonster.com/',
  height: 400,
  report: {
    dataSource: {
      filename: 'data/data.json',
    },
    slice: {
      rows: [
        {
          uniqueName: 'Category',
        },
        {
          uniqueName: 'Country',
        },
        {
          uniqueName: 'Price',
        },
      ],
    },
    options: {
      editing: true,
      grid: {
        type: 'flat',
      },
    },
  },
})

// Attach MutationObserver
const container = document.getElementById('pivot-container')
const observer = new MutationObserver((mutationsList) => {
  for (const mutation of mutationsList) {
    // Show dropdown when entering editing
    for (const node of mutation.addedNodes) {
      if (
        node.nodeType === 1 &&
        node.matches?.(
          'textarea.fm-ui-element.fm-ui.fm-ui-text-area.fm-editing-cell',
        )
      ) {
        attachDropdown(pivot, node)
      }
    }

    // Hide dropdown when exiting editing
    for (const node of mutation.removedNodes) {
      if (
        node.nodeType === 1 &&
        node.matches?.(
          'textarea.fm-ui-element.fm-ui.fm-ui-text-area.fm-editing-cell',
        )
      ) {
        const dropdown = document.getElementById('categories')
        if (dropdown) dropdown.style.display = 'none'
      }
    }
  }
})

observer.observe(container, {
  childList: true,
  subtree: true,
})

function isCellOfHierarchy(cell, hierarchy) {
  return cell.hierarchy && cell.hierarchy.uniqueName === hierarchy
    ? true
    : false
}

function attachDropdown(pivot, textarea) {
  const dropdown = document.getElementById('categories')
  if (!dropdown) return

  // Get members
  const categories = pivot.getMembers('Category').map((m) => m.caption)
  if (!isCellOfHierarchy(pivot.getSelectedCell(), 'Category')) return
  // Position dropdown
  const rect =...