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 = "filterTimestamps('2023-09-05',10)">
Time greater than 10 hours & Date greater than 2023-09-05
</button>
<div id="pivot-container"></div>

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      data: getData(),
      mapping: {
        "Date": {
          "type": "datetime"
        }
      }
    },
    options: {
      dateTimePattern: "yyyy.MM.dd hh:mm:ss TT"
    }
  }
});

//considering day in ISO format and hours as an integer
function filterTimestamps(day, hours) {
//Extract all timestamps from data on the grid
  const timestamps = pivot.getMembers("Date").map(d =>  parseInt(d.uniqueName.match(/\d+/)[0], 10));
  const filteredTimestamps = [];

  for (const timestamp of timestamps) {
    // Create a Date object from the timestamp
    const date = new Date(timestamp);
    // Get the hours from the Date object
    const dateISO = date.toISOString().split('T')[0];
    // Check if the hours and the date are greater than the specified ones
    if ( date.getHours() > hours && dateISO > day) {
      filteredTimestamps.push(timestamp);
    }
  }
  //Apply filter using Flexmonster's API
  pivot.setFilter("Date", {
    members: filteredTimestamps.map(t => "date.[" + t + "]")
  })
}




function getData() {
  return [{
      "Date": 1693990800000,
      "Event": "Concert",
      "Price": 56
    },
    {
      "Date": 1693987200000,
      "Event": "Performance",
      "Price": 34
    },
    {
      "Date": 1693980000000,
      "Event": "Cinema",
      "Price": 10
    },
    {
      "Date": 1693900800000,
      "Event": "Art",
      "Price": 28
    }
  ]
}