Hide or show spreadsheet headers

Options

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<button onclick="hideHeaders()">Hide headers</button>
<button onclick="showHeaders()">Show headers</button>

<div id="pivot-container"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

JavaScript

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 hideHeaders() {
    pivot.setOptions({
        grid: {
            showHeaders: false
        }
    });
    pivot.refresh();
}

function showHeaders() {
    pivot.setOptions({
        grid: {
            showHeaders: true
        }
    });
    pivot.refresh();
}