JSFiddle - React, Tailwind, and code Playground

Customizing the grid

by Flexmonster Pivot Table

HTML

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

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

JavaScript

function getMeasureValori(DividiPerDato) {
  if (DividiPerDato == 0) {
    console.log("Valori normali")

    return [
      {
        uniqueName: "Valori",
        aggregation: "sum",
        format: "euroformato",
        individual: true,
      },
    ]
  } else {
    return [
      {
        caption: "Media",
        uniqueName: "weighted_avg",
        formula: "if(sum('Divisor') != 0, sum('Valori')  / (sum('Divisor')), 0)",
        format: "euroformato",
        individual: true,
      }
    ]
  }
}

let measureValori = getMeasureValori(1)

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      data: getData(),
    },
    formats: [
      {
        decimalPlaces: 2,
        name: "euroformato",
      },
    ],
    slice: {
      rows: [
        {
          uniqueName: "G1",
        },
      ],
      columns: [
        {
          uniqueName: "Anno",
        },
        {
          uniqueName: "Mese",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: measureValori,
      expands: {
        expandAll: true,
      },
    },
    options: {
      grid: {
        showTotals: "off",
        showGrandTotals: "off"
      },
    },
  },
})

function getData() {
  return [
    {
      G1: "Reddito Netto",
      G2: " EBITDA",
      G3: "Profitto Operativo Lordo (GOP)",
      G4: " Profitto dei Reparti Operativi",
      G5: "Costi Operativi",
      G6: " Camere",
      Anno: "2026",
      Mese: "Gennaio",
      Valori: "-105.08476305007935",
      Divisor: "28.000000",
      Livello: "L.5",
      G7:...