JSFiddle - React, Tailwind, and code Playground
by Flexmonster Pivot Table
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>
JavaScript
var pivot = new Flexmonster({
container: "#pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
toolbar: true,
report: {
dataSource: {
dataSourceType: "json",
data: getData()
},
slice: {
rows: [{
uniqueName: "MortgageNumber"
},
{
uniqueName: "DealFees_ReimbursementType"
}
],
columns: [{
uniqueName: "Status"
},
{
uniqueName: "LendingValue"
},
{
uniqueName: "[Measures]"
}
],
measures: [{
uniqueName: "LendingValue",
aggregation: "sum"
}],
expands: {
rows: [{
tuple: [
"mortgagenumber.[9001686]"
]
}]
}
}
},
width: "100%",
height: 370
});
function getData() {
return [
{
"Id": 2201,
"MortgageNumber": 9001686,
"Status": "FUNDED",
"DealType": "Purchase",
"ProgramType": "Second Home",
"PostalCode": "N6G0K2",
"LendingValue": 403000.0000,
"LoanAmount": 368479.4000,
"DateReceived": "2019-06-13T16:50:17",
"DealAudit": "",
"DealFees_ReimbursementType": "Cash Back"
},
{
"Id": 2201,
"MortgageNumber": 9001686,
"Status": "FUNDED",
"DealType": "Purchase",
"ProgramType": "Second Home",
"PostalCode": "N6G0K2",
"LendingValue": 403000.0000,
"LoanAmount": 368479.4000,
"DateReceived": "2019-06-13T16:50:17",
"DealAudit": "",
"DealFees_ReimbursementType": "Appraisal"
},
{
"Id": 2201,
"MortgageNumber": 9001686,
"Status": "FUNDED",
"DealType": "Purchase",
"ProgramType": "Second Home",
"PostalCode": "N6G0K2",
"LendingValue": 403000.0000,
"LoanAmount": 368479.4000,
"DateReceived": "2019-06-13T16:50:17",
"DealAudit": "",
"DealFees_ReimbursementType": "Appraisal"
},
{
"Id": 2202,
...