JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivot-container">The component will appear here</div>

JavaScript

var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  height: 600,
  report: {
    dataSource: {
      type: "json",
      data: [
        {
          "Day Date": {
            type: "string",
          },
          "Response Id": {
            type: "string",
          },
          "Site name": {
            type: "string",
          },
          "Site objective": {
            type: "number",
            visible: true,
          },
        },
        ["2024-12-01", "a", "Site 1", "2"],
        ["2024-12-01", "b", "Site 1", "2"],
        //Recors with empty response ids
        ["2024-12-01", "", "Site 2", "2"],
        ["2024-12-01", "", "Site 3", "2"],
      ],
    },
    slice: {
      rows: [
        {
          uniqueName: "Site name",
        },
      ],
      columns: [
        {
          uniqueName: "Day Date",
        },
        {
          uniqueName: "Site objective",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "respCount",
          formula: 'if( count("Response Id") , count("Response Id"), 0)',
          caption: "Response count",
        },
        {
          uniqueName: "Objective",
          formula: 'average("Site objective") * distinctcount("Day Date") * distinctcount("Site name")',
          caption: "Objective",
        },
        {
          uniqueName: "Result",
          formula: 'if( "respCount"  , "respCount"  / "Objective" , 0)',
          caption: "Result",
          format: "Result",
        },
        {
          uniqueName: "Formula #1",
          formula: 'average( "Result" )',
          caption: "Final result",
          active: false,
        },
      ],
    },
    formats: [
      {
        name: "Result",
        decimalPlaces: 0,
        isPercent: true,
      },
    ],
  },
})