JSFiddle - React, Tailwind, and code Playground

Customizing the grid

by Flexmonster Pivot Table

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

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

CSS

#fm-pivot-view .fm-grid-row {
  max-height: 300px;
}

JavaScript

let pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  height: 700,
  customizeCell: applyCustomLayout,
  report: {
    dataSource: {
      data: getData(),
    },
    options: {
      drillThrough: false,
      grid: {
        type: "classic",
        showTotals: "off",
        showGrandTotals: "off",
      },
    },
    slice: {
      rows: [
        {
          uniqueName: "Color",
        },
        {
          uniqueName: "Size",
        },
      ],
      columns: [
        {
          uniqueName: "State",
        },
        {
          uniqueName: "City",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
      ],
    },
  },
})

const imgHeight = [100, 200, 50]
const imgWidth = 200

function applyCustomLayout(cell, data) {
  if (!(data.hierarchy && data.hierarchy.uniqueName == "Size") || data.measure)
    return
  if (data && data.type == "header" && data.label != "") {
    cell.text += `<div style="background-color:#e6e6e6; width: ${imgWidth}px; height: ${imgHeight[data.rowIndex % 3]}px; display:flex; justify-content:center;">
        <img src='https://uxwing.com/wp-content/themes/uxwing/download/medical-science-lab/dna-icon.svg' style="height: ${imgHeight[data.rowIndex % 3]}px"/> </div>`
  }
  cell.style["min-height"] = imgHeight + "px"
  cell.style["min-width"] = imgWidth + "px"
}

function getData() {
  return [
    {
      Color: "green",
      Size: "L",
      State: "California",
      City: "Los Angeles",
      Price: 174,
      Quantity: 22,
    },
    {
      Color: "blue",
      Size: "M",
      State: "California",
      City: "Los Angeles",
      Price: 531,
      Quantity: 19,
    },
    {
      Color: "black",
      Size: "S",
      State: "California",
      City: "Los Angeles",
      Price: 166,
      Quantity: 19,
    },
    {
     ...