Flexmonster - Classic View

Demos

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

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

JavaScript

const pivot = new Flexmonster({
    container: "#pivot-container",
    componentFolder: "https://cdn.flexmonster.com/",
    height: 450,
    report: {
      dataSource: {
        type: "csv",
        filename: "data/data.csv",
      },
      options: {
        grid: {
            "type": "classic",
             "title": "",
            "dragging": false,
            "showFilter": false,
            "showTotals": "off",
            "showHeaders": false,
            "showGrandTotals": "off",
            "showHierarchies": true,
            showHeaders: false,
            showHierarchies: false,
            showAutoCalculationBar: true
        },
      },
      slice: {
        rows: [
          {
            uniqueName: "Business Type", showTotals: false
          },
        ],
        columns: [
          {uniqueName: '[Measures]'},
          {
            uniqueName: "Color"
          },
        ],
        measures: [
          {
            uniqueName: "Discount"
          },
          {
            uniqueName: "Price",
          },
        ],
        expandAll: true,
      },
    },
  });
  
  function changeLayout(layoutType) {
      console.log(layoutType)
    pivot.setOptions({
      grid: {
        type: layoutType,
      },
    });
    pivot.refresh();
  }