Grid options

Options

by Flexmonster Pivot Table

HTML

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

<div class="buttons-container">
  <div class="select-container compact">
    <span class="text">Grid type: </span>
    <select id="select-grid-type">
      <option selected value="compact">Compact view</option>
      <option value="classic">Classic (tabular) view</option>
      <option value="flat">Flat view</option>
    </select>
  </div>
  <div class="buttons-row">
    <div class="switch-container compact">
      <label class="switch">
        <input type="checkbox" onclick="toggleFilters()" checked />
        <span class="slider round"></span>
      </label>
      <span class="text">Filters</span>
    </div>
    <div class="switch-container compact">
      <label class="switch">
        <input type="checkbox" onclick="toggleHeaders()" checked />
        <span class="slider round"></span>
      </label>
      <span class="text">Headers</span>
    </div>
    <div class="switch-container compact">
      <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>

CSS

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

JavaScript

const 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", !pivot.getOptions().grid.showFilter);
}

function toggleHeaders() {
  setGridOption("showHeaders", !pivot.getOptions().grid.showHeaders);
}

function toggleGrandTotals() {
  let showGrandTotals = pivot.getOptions().grid.showGrandTotals;
  setGridOption("showGrandTotals", showGrandTotals === "on" ? "off" : "on");
}

function setGridOption(option, value) {
  pivot.setOptions({
    viewType: "grid",
    grid: {
      [option]: value,
    },
  });
  pivot.refresh();
}

document.getElementById("select-grid-type").addEventListener("change",...