JSFiddle - React, Tailwind, and code Playground
by Flexmonster Pivot Table
September 12, 2019
HTML
<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<button onclick="showInL()">Show data in Lakhs (L)</button>
<button onclick="showInCr()">Show data in Crores (Cr)</button>
<div id="pivot-container"></div>
JavaScript
var pivot = new Flexmonster({
container: "#pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
customizeCell: customizeCell,
report: {
dataSource: {
dataSourceType: "json",
data: getData()
},
slice: {
rows: [{
uniqueName: "Country"
}, {
uniqueName: "Category"
}, {
uniqueName: "[Measures]"
}],
columns: [{
uniqueName: "Color"
}],
measures: [{
uniqueName: "Price"
}],
}
},
width: "100%",
height: 600,
toolbar: true
});
var formatUnit = "L";
function customizeCell(cell, data){
if(data && data.hierarchy && data.hierarchy.uniqueName == "Price" && data.label != ""){
let number = parseInt(data.label.replace(/\s/g, ""));
if(formatUnit === "L"){
if (number > 99999) {
cell.text = Math.round((number / 100000) * 100) / 100 + "L";
}
}else if(formatUnit === "Cr"){
if (number > 9999999) {
cell.text = Math.round((number / 10000000) * 100) / 100 + "Cr";
}
}
}
}
function showInL(){
formatUnit = "L"
pivot.refresh();
}
function showInCr(){
formatUnit = "Cr"
pivot.refresh();
}
function getData() {
return [{
"Category": "Accessories",
"Size": "262 oz",
"Color": "red",
"Destination": "Australia",
"Business Type": "Specialty Bike Shop",
"Country": "Australia",
"Price": 500000,
"Quantity": 225,
"Discount": 23
}, {
"Category": "Accessories",
"Size": "214 oz",
"Color": "yellow",
"Destination": "Canada",
"Business Type": "Specialty Bike Shop",
"Country": "Canada",
"Price": 502,
"Quantity": 90,
"Discount": 17
}, {
"Category": "Components",
"Size": "235 oz",
"Color": "green",
"Destination": "Australia",
"Business Type": "Warehouse",
"Country": "Australia",
"Price": 19566907,
"Quantity": 19566907,
"Discount": 51
}, {
"Category":...