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>

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      data: getData(),
      mapping: {
        Date: {
          type: "date string",
        },
      },
    },
    options: {
      grid: {
        showGrandTotals: "columns",
      },
    },
    slice: {
      rows: [
        {
          uniqueName: "Statut_Conventionnel",
        },
      ],
      columns: [
        {
          uniqueName: "Date",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Bonus",
          aggregation: "sum",
        },
      ],
    },
    conditions: [
      {
        formula: "#value > 25",
        format: {
          backgroundColor: "#FFFFFF",
          color: "#E53935",
          fontFamily: "Arial",
          fontSize: "12px",
        },
      },
    ],
  },
})

function getData() {
  return [
    {
      Statut_Conventionnel: "Cadres",
      Date: "2024-10-31",
      Bonus: 11,
    },
    {
      Statut_Conventionnel: "Cadres",
      Date: "2024-10-31",
      Bonus: 10,
    },
    {
      Statut_Conventionnel: "Employes",
      Date: "2024-10-31",
      Bonus: 39,
    },
    {
      Statut_Conventionnel: "Employes",
      Date: "2024-10-31",
      Bonus: 40,
    },
  ]
}