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/flexmonster.js"></script>
<div id="pivot-container"></div>
CSS
.fm-custom-cell {
display: flex !important;
align-items: center !important;
font-size: 12px !important;
}
.fm-custom-cell .flag-icon {
width: 21px !important;
height: 16px !important;
margin-left: 0 !important;
margin-right: 2px !important;
}
#fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-expanded .fm-expanded-icon::before,
#fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-collapsed .fm-collapsed-icon::before {
top: -2px;
height: 16px;
}
JavaScript
var template = {
"dataSource": {
"type": "json",
"mapping": {
"FlyerId": {
"caption": "Ads",
"dimensionUniqueName": "Measures",
"type": "number",
"uniqueName": "FlyerId"
},
"PageDetailId": {
"caption": "Products",
"dimensionUniqueName": "Measures",
"type": "number",
"uniqueName": "PageDetailId"
},
"AdBlockId": {
"caption": "AdBlocks",
"dimensionUniqueName": "Measures",
"type": "number",
"uniqueName": "AdBlockId"
},
"Year": {
"caption": "Year",
"dimensionUniqueName": "Dates & Periods",
"type": "number",
"uniqueName": "Year"
},
"Quarter": {
"caption": "Quarter",
"dimensionUniqueName": "Dates & Periods",
"type": "string",
"uniqueName": "Quarter"
},
"Month": {
"caption": "Month",
"dimensionUniqueName": "Dates & Periods",
"type": "string",
"uniqueName": "Month"
},
"MonthOfYear": {
"caption": "Month Of Year",
"dimensionUniqueName": "Dates & Periods",
"type": "string",
"uniqueName": "MonthOfYear"
},
"DateRange": {
"caption": "Week (Sun. - Sat.)",
"dimensionUniqueName": "Dates & Periods",
"type": "string",
"uniqueName": "DateRange"
},
"DateRange1": {
"caption": "Week (Mon. - Sun.)",
"dimensionUniqueName": "Dates & Periods",
"type": "string",
"uniqueName": "DateRange1"
},
"DateRange2": {
"caption": "Week (Tue. - Mon.)",
"dimensionUniqueName": "Dates & Periods",
"type": "string",
"uniqueName": "DateRange2"
},
"DateRange3": {
"caption": "Week (Wed. - Tue.)",
"dimensionUniqueName": "Dates & Periods",
"type": "string",
"uniqueName": "DateRange3"
},
"DateRange4": {
"caption":...