Flexmonster - Pivot Table demo
Demos
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
new Flexmonster({
container: "#pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
width: "100%",
height: 550,
customizeCell: customizeCell,
toolbar: true,
report: {
"dataSource": {
"data": [
{
"State": {
"type": "string"
},
"FatalCOUNT": {
"type": "number"
},
"AccidentCOUNT": {
"type": "number"
}
},
{
"State": "DC",
"FatalCOUNT": "2",
"AccidentCOUNT": "2"
},
{
"State": "MD",
"FatalCOUNT": "95",
"AccidentCOUNT": "95"
},
{
"State": "PA",
"FatalCOUNT": "1",
"AccidentCOUNT": "1"
},
{
"State": "VA",
"FatalCOUNT": "1",
"AccidentCOUNT": "1"
}
]
},
"formats": [
{
"name": "",
"thousandsSeparator": ","
}
],
"slice": {
"rows": [],
"columns": [
{
"uniqueName": "State",
"caption": "State",
"sort": "asc"
}
],
"measures": [
{
"uniqueName": "FatalCOUNT",
"aggregation": "sum",
"caption": "Fatal (Count)"
},
{
"uniqueName": "AccidentCOUNT",
"aggregation": "sum",
"caption": "Accident (Count)"
}
]
},
"options": {
"grid": {
"showFilter": false,
"showHeaders": true,
"showGrandTotals": "on"
},
"sorting": true,
"drillThrough": false,
"configuratorButton": false,
"showAggregationLabels": false
}
}
});
function customizeCell(cell, data) {
if (data.hierarchy && data.type == "header") {
if (data.hierarchy.caption == "Country" && data.member && data.member.properties) {
let name = data.member.properties.CurrencyID;
let flag = `<i class="fm-icon ${data.expanded?"fm-expanded-icon":"fm-collapsed-icon"}"
title="${data.expanded?"Click to collapse":"Click to expand"}"></i>
<img...