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>


<button onclick="getFilter()">Get filter</button>

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

<div class="output" id="output">Output will appear here</div>

CSS

.output {
  width: 80%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  background: rgba(242, 242, 242, 1);
  font-family: Menlo, Monaco, "Courier New", Courier, monospace;
  white-space: pre;
  font-size: 16px;
  font-weight: 400;
  overflow-y: scroll;
  margin-top: 20px;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      data: getData(),
      mapping: {
        "Date": {
          type: "datetime",
          caption: "Date"
        }
      }
    },
    slice: {
      measures: [{
          uniqueName: "Date",
          filter: {
            query: {
              between: [
                "2022-04-01",
                "2022-04-27"
              ]
            }
          }
        },
        {
          uniqueName: "Price",
          aggregation: "sum"
        },
        {
          uniqueName: "Pay_id",
          aggregation: "sum"
        }
      ]
    },
    options: {
      grid: {
        type: "flat"
      }
    }
  }
});


function getFilter() {
  let filter = flexmonster.getFilter('Date')
  filter.query.between = filter.query.between.map(date => {
    // milliseconds * seconds * minutes * hours 
    let oneDayUnix = 1000 * 60 * 60 * 24;
    if (filter.query.between.indexOf(date) === 1) return (Date.parse(date) + (oneDayUnix - 1)).toString()
    return Date.parse(date).toString()
  })
  showOutput(JSON.stringify(filter, null, 4));
}


function showOutput(content) {
  document.getElementById("output").innerText = content;
}

function getData() {
  return [{
      "Date": "2022-04-01",
      "Price": 100,
      "Pay_id": 1
    },
    {
      "Date": "2022-04-28",
      "Price": 200,
      "Pay_id": 2
    },
    {
      "Date": "2022-04-27",
      "Price": 300,
      "Pay_id": 3
    }
  ]
}