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": [{
"DataDomain": {
"type": "string"
},
"Name": {
"type": "string"
},
"MeasureNamePath": {
"type": "string"
},
"DisplayWeightCustomPivotmeasure_f47b1256dbef41548d567931abf0bac1": {
"type": "number"
},
"DisplayWeightCOUNT": {
"type": "number"
},
"DisplayWeightSUM": {
"type": "number"
}
},
{
"DataDomain": "Client Accounting",
"Name": "Accounts Receivable (AR)",
"MeasureNamePath": "Data Domain is assigned",
"DisplayWeightCOUNT": "1",
"DisplayWeightSUM": "0.3000000000"
},
{
"DataDomain": "Client Accounting",
"Name": "Accounts Receivable (AR)",
"MeasureNamePath": "Definition is populated",
"DisplayWeightCOUNT": "1",
"DisplayWeightSUM": "0.2000000000"
},
{
"DataDomain": "Client Accounting",
"Name": "Accounts Receivable (AR)",
"MeasureNamePath": "Ownership > Data Owner is assigned",
"DisplayWeightCOUNT": "1",
"DisplayWeightSUM": "0.1500000000"
},
{
"DataDomain": "Client Accounting",
"Name": "Accounts Receivable (AR)",
"MeasureNamePath": "Ownership > Data Steward is assigned",
"DisplayWeightCOUNT": "1",
"DisplayWeightSUM": "0.0000000000"
},
{
"DataDomain": "Client Accounting",
"Name": "Accounts Receivable (AR)",
"MeasureNamePath": "Status is Certified",
"DisplayWeightCOUNT": "1",
"DisplayWeightSUM": "0.2000000000"
},
{
...