let pivot = new Flexmonster({ container: "pivot-container", componentFolder: "https://cdn.flexmonster.com/", height: 355, report: { dataSource: { filename: "data/data.csv" }, slice: { columns: [{ filter: { members: ["color.[green]", "color.[red]", "color.[white]", "color.[yellow]"] }, uniqueName: "Color" }], expands: { rows: [{ tuple: ["category.[accessories]"] }] }, measures: [{ aggregation: "sum", uniqueName: "Price" }], reportFilters: [{ uniqueName: "Business Type" }], rows: [{ filter: { members: ["category.[accessories]", "category.[clothing]"] }, uniqueName: "Category" }, { filter: { members: ["country.[france]", "country.[germany]", "country.[united kingdom]"] }, uniqueName: "Country" }, { uniqueName: "[Measures]" }] } } }); function toggleFilters() { setGridOption('showFilter', !flexmonster.getOptions().grid.showFilter); } function toggleHeaders() { setGridOption('showHeaders', !flexmonster.getOptions().grid.showHeaders); } function toggleGrandTotals() { let showGrandTotals = flexmonster.getOptions().grid.showGrandTotals; setGridOption('showGrandTotals', showGrandTotals === 'on' ? 'off' : 'on'); } function setGridOption(option, value) { flexmonster.setOptions({ grid: { [option]: value } }); flexmonster.refresh(); } document.querySelectorAll('.selectopt').forEach(function(opt) { opt.addEventListener('change', function() { setGridOption('type', this.value); }); });
<script src="https://cdn.flexmonster.com/flexmonster.js"></script> <div class="buttons-container"> <div class="select-container"> <span class="text">Grid type: </span> <div class="select" tabindex="1"> <input class="selectopt" name="grid-type" type="radio" id="opt1" value="compact" checked> <label for="opt1" class="option">Compact view</label> <input class="selectopt" name="grid-type" type="radio" id="opt2" value="classic"> <label for="opt2" class="option">Classic view</label> <input class="selectopt" name="grid-type" type="radio" id="opt3" value="flat"> <label for="opt3" class="option">Flat view</label> </div> </div> <div class="second-row-buttons"> <div class="switch-container"> <label class="switch"> <input type="checkbox" onclick="toggleFilters()" checked> <span class="slider round"></span> </label> <span class="text">Filters</span> </div> <div class="spacer"></div> <div class="switch-container"> <label class="switch"> <input type="checkbox" onclick="toggleHeaders()" checked> <span class="slider round"></span> </label> <span class="text">Headers</span> </div> <div class="spacer"></div> <div class="switch-container"> <label class="switch"> <input type="checkbox" onclick="toggleGrandTotals()" checked> <span class="slider round"></span> </label> <span class="text">Grand totals</span> </div> </div> </div> <div id="pivot-container"></div>