Hide or show sorting controls

Options

by Flexmonster Pivot Table

HTML

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

<p>
  This example demonstrates how to manage visibility of the sorting controls.
  They appear when hovering over member names or total cells.
</p>

<div class="switch-container">
  <label class="switch">
    <input type="checkbox" onclick="toggleSortingControls()" checked />
    <span class="slider round"></span>
  </label>
  <span class="text">Sorting controls</span>
</div>

<div>
  <div id="pivot-container" class="column right"></div>
</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: {
      rows: [
        {
          uniqueName: "Category",
        },
      ],
      columns: [
        {
          uniqueName: "Color",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          aggregation: "sum",
          uniqueName: "Price",
        },
      ],
    }
  },
})

function toggleSortingControls() {
  const currentSorting = pivot.getOptions().sorting;
  const newSorting = currentSorting === "on" ? "off" : "on";
  setOption("sorting", newSorting);
}

function setOption(option, value) {
  pivot.setOptions({
    [option]: value,
  })
  pivot.refresh()
}