JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

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

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

JavaScript

var jsonData = [{
    "PROJECT TITLE": "A",
    "PROJECT TYPE SHORT": "B",
    "PROJECT NEEDS SOMETHING": "C",
    "SOMETHING SOMETHING ELSE": "D",
    "COMPLETELY ANOTHER THING": "E",
    "SOURCING OWNER": "F",
    "ESTIMATED START DATE": "G",
    "ESTIMATED START DATE BUT LONGER": "F",
    "ESTIMATED END DATE": "G",
    "ACTUAL END DATE": "H",
    "ACTUAL END DATE YEAR": "O",
    "ACTUAL END DATE DAY": "H",
    "ACTUAL END DATE WEEK": "E",
    "ACTUAL END DATE SOMETHING": "R",
    "ACTUAL END DATE TIME": "O",
    "ACTUAL STATE DATE TIME": "O",
    "ACTUAL LONGER ONE DATE TIME": "O",
    "ACTUAL END DATE TIME1": "O",
    "ACTUAL END DATE TIME2": "O",
    "ACTUAL END DATE TIME3": "O",
    "ACTUAL END DATE TIME4": "O",
    "ACTUAL END DATE TIME5": "O",
    "ACTUAL END DATE TIME6": "O",
    "ESTIMATING SPEND": "O",
    "ESTIMATING SAVINGS": "O",
    "PROJECT RECOGNITION": "O",
    "SOMETHING ABOUT CURRENCY": "O",
    "DATE": "O",
    "PROJECT TYPE": "DSF",
    "PROJECT REQUESTER": "O",
    "CATEGORY": "O",
    "PROJECT DESCRIPTION": "O",
    "PROJECT SUBMITTED": "O",
    "RESULT SUBMITTED": "O",
    "RESULT SUBMITTED1": "O",
    "RESULT SUBMITTED2": "O",
    "RESULT SUBMITTED3": "O",
    "RESULT SUBMITTED4": "O",
    "RESULT SUBMITTED5": "O",
    "RESULT SUBMITTED6": "O",
    "RESULT SUBMITTED7": "O",
    "RESULT SUBMITTED8": "O",
    "RESULT SUBMITTED9": "O",
    "RESULT SUBMITTED10": "O",
    "RESULT SUBMITTED11": "O",
    "RESULT SUBMITTED12": "O",
    "RESULT SUBMITTED13": "O",
    "RESULT SUBMITTED14": "O",
    "RESULT SUBMITTED15": "O",
    "RESULT SUBMITTED16": "O",
    "RESULT SUBMITTED17": "O",
    "RESULT SUBMITTED18": "O",
    "RESULT SUBMITTED19": "O",
    "Price": 567
  },
  {
    "PROJECT TITLE": "A",
    "PROJECT TYPE SHORT": "B",
    "PROJECT NEEDS SOMETHING": "C",
    "SOMETHING SOMETHING ELSE": "D",
    "COMPLETELY ANOTHER THING": "E",
    "SOURCING OWNER": "F",
    "ESTIMATED START DATE": "G",
    "ESTIMATED START DATE BUT LONGER": "F",
   ...