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>
<button onclick="setLocalization('en')">English</button>
<button onclick="setLocalization('fr')">Français</button>
<button onclick="setLocalization('it')">Italiano</button>
<button onclick="setLocalization('es')">Español</button>
<button onclick="setLocalization('pt')">Português</button>
<button onclick="setLocalization('zh')">中国的</button>
<button onclick="setLocalization('uk')">Українська</button>
<div id="pivot-container"></div>
JavaScript
var currentLang = 'en';
function setLocalization(lang) {
currentLang = lang;
pivot.setReport({
dataSource: {
type: "csv",
filename: "data/data-" + lang + ".csv"
},
localization: "loc/" + lang + ".json"
});
}
var pivot = new Flexmonster({
container: "#pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
global: {
localization: "loc/en.json"
},
report: {
dataSource: {
type: "csv",
filename: "data/data-en.csv"
},
options: {
configuratorActive: false
}
},
width: "100%",
height: 430,
toolbar: true,
beforetoolbarcreated: customizeToolbar
});
var pdfFonts = {
"en": "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
"fr": "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
"it": "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
"es": "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
"pt": "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
"zh": "https://cdn.flexmonster.com/fonts/NotoSansCJKsc-Regular.ttf",
"uk": "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
}
function customizeToolbar(toolbar) {
FlexmonsterToolbar.prototype.exportHandler = function(type) {
if (type == "pdf") {
this.pivot.exportTo(type, {
fontUrl: pdfFonts[currentLang]
});
} else {
this.pivot.exportTo(type);
}
}
}