JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/2.8.27/flexmonster.js"></script>
<button onclick="openFilterC()">Open filter for Countries</button>
<button onclick="openFilterDate()">Open filter for Dates</button>
<div id="pivot-container"></div>
JavaScript
let pivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
report: {
dataSource: {
data:getData(),
mapping: {
"Datetime": {
type: "datetime"
},
"Country": {
type: "string"
},
"Price": {
type: "number"
}
}
},
options: {
viewType: 'grid',
grid: {
type: 'flat',
showFilter: true,
showHeaders: true,
showTotals: false,
showGrandTotals: 'off',
showHierarchies: false,
showHierarchyCaptions: true,
showReportFiltersArea: true
}
}
},
});
function openFilterC() {
pivot.openFilter("Country");
}
function openFilterDate() {
pivot.openFilter("Datetime");
}
function getData() {
return [{
"Country": "Japan",
"Price": 985,
"Datetime": "2022-03-31T21:45:38+00:00",
},
{
"Country": "Japan",
"Price": 817,
"Datetime": "2022-03-31T21:45:38+00:00",
},
{
"Country": "Japan",
"Price": 798,
"Datetime": "2022-03-31T21:45:38+00:00",
},
{
"Country": "Australia",
"Price": 875,
"Datetime": "2022-03-31T21:45:38+00:00",
},
{
"Country": "Australia",
"Price": 858,
"Datetime": "2022-03-31T21:45:38+00:00",
},
{
"Country": "Australia",
"Price": 907,
"Datetime": "2022-03-31T21:45:38+00:00",
}
]
}