Flexmonster - Pivot Table demo
Demos
HTML
<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.min.js"></script>
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.3.2/dist/html2canvas.min.js"></script>
<button onclick="customExport()">Export drill-through</button>
<div id="pivot-container" class="col-md-10 col-sm-9"></div>
JavaScript
new Flexmonster({
container: "#pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
width: "100%",
height: 550,
toolbar: true,
report: {
"dataSource": {
"dataSourceType": "json",
"mapping": {
"datasource": {
"type": "string"
},
"date": {
"type": "string"
},
"recordId": {
"type": "id"
},
"month": {
"type": "string",
"folder": "Dates",
"order": [
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12"
]
},
"amount": {
"type": "number",
"toMeasuresFlag": true
},
"current": {
"type": "number"
},
"level1": {
"hierarchy": "rows"
},
"previous": {
"type": "number"
}
},
"data": [
{
"datasource": {
"type": "string"
},
"date": {
"type": "string"
},
"recordId": {
"type": "id"
},
"month": {
"type": "string",
"folder": "Dates",
"order": [
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
...