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/2.9.21/flexmonster.js"></script>

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

CSS

h2 {
  text-align: center;
}

p {
  font-size: 15px;
  line-height: 1.5;
  padding-right: 10px;
  padding-left: 10px;
}

a {
  color: #00a45a;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code {
  font-size: 105%;
  color: #DF3800;
  background-color: #f5f5f5;
  padding: 1px 4px;
  font-family: monospace !important;
  border-radius: 4px;
}

.icon {
  display: inline-block;
  padding: 0 11px 0 11px;
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  font-size: 20px;
  background: #fbfbfb;
  color: #999;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    conditions: [{
        format: {
          color: '#FFFFFF',
          fontSize: '12px',
          fontFamily: 'Arial',
          backgroundColor: '#D32F2F',
        },
        formula: '#value < -0.01',
      },
      {
        format: {
          color: '#FFFFFF',
          fontSize: '12px',
          fontFamily: 'Arial',
          backgroundColor: '#689F38',
        },
        formula: '#value > 0.01',
        measure: 'calc_field_growth',
      },
    ],
    dataSource: {
      data: [{
          day: '1',
          sales: 10.1000000000001,
          calc_field: 288.879999999997,
        },
        {
          day: '2',
          sales: 737.7,
          calc_field: 123.59,
        },
        {
          day: '3',
          sales: null,
          calc_field: null,
        },
        {
          day: '4',
          sales: 115.795000000000002,
          calc_field: 315.41,
        },
        {
          day: '5r',
          sales: 526.463333333334,
          calc_field: 303.14,
        },
        {
          day: '6',
          sales: 1081.1733180318,
          calc_field: 1210.97,
        },
        {
          day: '7',
          sales: 1453.48644185858,
          calc_field: 1516.68,
        },
        {
          day: '8',
          sales: 1758.9,
          calc_field: 488.12,
        },
        {
          day: '9',
          sales: 381.29903377297,
          calc_field: -309.550000000003,
        },
        {
          day: '10',
          sales: 315.4057,
          calc_field: 488.9572,
        },
        {
          day: '11',
          sales: 19.1934430361644,
          calc_field: 13.87,
        },
        {
          day: '12',
          sales: 33.203340710884,
          calc_field: -151.47,
        },
        {
          day: '13',
          sales: 880,
          calc_field: 702.3,
        },
        {
    ...