JSFiddle - React, Tailwind, and code Playground

Customizing the context menu

by Flexmonster Pivot Table

HTML

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

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

CSS

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

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 430,
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    options: {
      grid: {
        type: "flat"
      }
    },
    slice: {
      rows: [
        {
          uniqueName: "Color",
          filter: {
          	exclude: ["purple", "yellow"]
          }
        }, 
        {
          uniqueName: "Country"
        }
      ],
      columns: [
      	{
        	uniqueName: "[Measures]"
      	}
      ],
      measures: [
      	{
        	uniqueName: "Price"
      	}
      ],
    }
  }
});

pivot.customizeContextMenu(function(items, data, viewType) {
  if (viewType == "flat") {
    if(data.hierarchy.type === "string") {
      items = items.filter(item => item.id !== "conditional_formatting")
    }
    items[0].label = "Cell formatting"
  }
  return items;
});