JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

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

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

  <script type="text/javascript" >
  function getData() {
    return[
      {
        transactions: { type: 'number' },
        allNetSales: { type: 'number' },
        avgCheck: { type: 'number' },
        busnDate: { type: 'date string' },
        locationString: { type: 'string' },
        storeWideAvgCheck: { type: 'number' },
        storeWidePctSales: { type: 'number' },
        storeWidePctTransactions: { type: 'number' },
        storeWideTransactions: { type: 'number' },
        storeWideAllNetSales: { type: 'number' },
        salesCompAmt: { type: 'number' },
        salesCompPct: { type: 'number' },
        transactionCompAmt: { type: 'number' },
        transactionCompPct: { type: 'number' },
      },
      {
        transactions: 11,
        allNetSales: 62.04,
        avgCheck: 5.64,
        busnDate: '2019-09-03',
        locationString: '82',
        storeWideAvgCheck: 2.11,
        storeWidePctSales: 0.0456,
        storeWidePctTransactions: 0.0286,
        storeWideTransactions: 385,
        storeWideAllNetSales: 1360.81,
        salesCompAmt: 62.04,
        salesCompPct: null,
        transactionCompAmt: 11,
        transactionCompPct: null,
      },
      {
        transactions: 44,
        allNetSales: 680.82,
        avgCheck: 15.47,
        busnDate: '2019-09-01',
        locationString: '82',
        storeWideAvgCheck: 8.48,
        storeWidePctSales: 0.0862,
        storeWidePctTransactions: 0.0389,
        storeWideTransactions: 1130,
        storeWideAllNetSales: 7902.4,
        salesCompAmt: 680.82,
        salesCompPct: null,
        transactionCompAmt: 44,
        transactionCompPct: null,
      },
      {
        transactions: 24,
        allNetSales: 374.76,
        avgCheck: 15.62,
        busnDate: '2019-09-02',
        locationString: '82',
     ...

CSS

.cellStyle {
  background-color: #fff !important;
}

.headerStyle {
  background-color: #e9e9e9 !important;
  color: #111 !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  position: relative !important;
  border: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

JavaScript

var m = [{
        uniqueName: "transactions", aggregation:"none",
        
      },{
        uniqueName: "allNetSales", aggregation:"none",
        
      }, {
        uniqueName: "busnDate", aggregation:"none",
        
      }, {
        uniqueName: "locationString", aggregation:"none",
        
      }, {
        uniqueName: "storeWideAvgCheck", aggregation:"none",
        
      }, {
        uniqueName: "storeWidePctSales", aggregation:"none",
        
      }, {
        uniqueName: "storeWidePctTransactions", aggregation:"none",
        
      }, {
        uniqueName: "storeWideTransactions", aggregation:"none",
        
      }, {
        uniqueName: "storeWideAllNetSales", aggregation:"none",
        
      }, {
        uniqueName: "salesCompAmt", aggregation:"none",
        
      }, {
        uniqueName: "transactionCompAmt", aggregation:"none",
        
      }, {
        uniqueName: "salesCompPct", aggregation:"none",
        
      }, {
        uniqueName: "transactionCompPct", aggregation:"none",
        
      }
      ];
var c =  [{
        uniqueName: "transactions"  
      },{
        uniqueName: "allNetSales"        
      }, {
        uniqueName: "avgCheck"      
      }, {
        uniqueName: "busnDate"
      }, {
        uniqueName: "locationString"
      }, {
        uniqueName: "storeWideAvgCheck"
      }, {
        uniqueName: "storeWidePctSales"
      }, {
        uniqueName: "storeWidePctTransactions"
      }, {
        uniqueName: "storeWideTransactions"
      }, {
        uniqueName: "storeWideAllNetSales"
      }, {
        uniqueName: "salesCompAmt"
      }, {
        uniqueName: "transactionCompAmt"
      }, {
        uniqueName: "salesCompPct"
      }, {
        uniqueName: "transactionCompPct"
      }
      ];
var r =   [/* {
        uniqueName: "transactions"  
      },{
        uniqueName: "allNetSales"        
      }, {
        uniqueName: "avgCheck"      
      }, {
        uniqueName: "busnDate"
      }, */ {
       ...