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", "4"],
        ["2024-12-01", "b", "Site 1", "4"],
        ["2024-12-01", "g", "Site 1", "4"],
        ["2024-12-01", "h", "Site 3", "4"],
        ["2024-12-02", "c", "Site 1", "4"],
        ["2024-12-02", "d", "Site 2", "3"],
        ["2024-12-02", "i", "Site 2", "3"],
        ["2024-12-02", "j", "Site 1", "4"],
        ["2024-12-03", "e", "Site 2", "3"],
        ["2024-12-03", "k", "Site 2", "3"],
        ["2024-12-03", "l", "Site 3", "4"],
        ["2024-12-04", "f", "Site 3", "4"],
        ["2024-12-04", "m", "Site 3", "4"],
        ["2024-12-04", "n", "Site 1", "4"],
      ],
    },
    formats: [
      {
        decimalPlaces: 2,
        isPercent: true,
        name: "result",
      },
    ],
    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)',
          calculateNaN: false,
          caption: "Response count",
        },
        {
          uniqueName: "Objective",
          formula: 'if( count("Response Id") , average("Site objective") * distinctcount("Site name") * distinctcount("Day Date") , 0)',
          caption: "Objective",
        },
        {
          uniqueName: "Result",
          format: "result",
          formula:
            'if( count("Response Id") , "respCount" / "Objective", 0)',
          caption:...