Get Free Trial
List of all demos

JavaScript Pivot Table: classic view

The classic form is a pivot table’s view that gives an Excel-like layout of hierarchies. With the classic pivot table, you can show hierarchy sublevels next to one another, in separate rows or columns.


    var pivot = new Flexmonster({
      container: "#pivot-container",
      componentFolder: "https://cdn.flexmonster.com/",
      report: {
        dataSource: {
          type: "csv",
          filename: "data/data.csv"
        },
        options: {
          grid: {
            type: "classic"
          },
          configuratorActive: false
        },
        slice: {
          rows: [{
            uniqueName: "Country"
          }, {
            uniqueName: "Business Type"
          }],
          columns: [{
            uniqueName: "Color"
          }, {
            uniqueName: "[Measures]"
          }],
          measures: [{
            uniqueName: "Price"
          }],
          expandAll: true
        }
      },
      width: "100%",
      height: 370
    });
    
    var layoutSwitch = document.querySelector("#layout-switch");
    
    function toggleLayout() {
      pivot.setOptions({
        grid: {
          type: (layoutSwitch.checked) ? "compact" : "classic"
        }
      })
      pivot.refresh();
    }
    
    pivot.on("reportchange", () => {
      if (pivot.getOptions().grid.type === "compact") {
        if (!layoutSwitch.checked) {
          layoutSwitch.checked = true;
        }
      }
    })
    
    <div class="switch-input-container">
      <div class="lbl-left">
        <div class="inp-inner">
          <label class="switch">
            <input type="checkbox" id="layout-switch" onchange="toggleLayout()">
            <div class="slider round" data-on="Using compact form" 
             data-off="Using classic form"></div>
          </label>
        </div>
      </div>
    </div>
    
    <div id="pivot-container"></div>
    
    /* For the switch button */
    
    .inp-inner {
      position: relative;
    }
    
    .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 32px;
    }
    
    .inp-inner input {
      height: 32px;
      border: 1px solid #D5D5D5;
      padding: 0 12px;
      font-size: 12px;
      font-family: "Open Sans", sans-serif;
      font-weight: 600;
      border-radius: 2px;
      -webkit-transition: all .3s;
      -o-transition: all .3s;
      transition: all .3s;
      width: 100%;
    }
    
    .switch input {
      display: none;
    }
    
    .inp-inner input {
      border: none;
      background-color: transparent;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      outline: none;
      color: #232323;
      font-family: "Open Sans", sans-serif;
    }
    
    .switch .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #DF3800;
      -webkit-transition: .4s;
      -o-transition: .4s;
      transition: .4s;
      border-radius: 20px;
    }
    
    .switch .slider:hover {
      background-color: #eb4913;
    }
    
    .switch input:checked+.slider:hover {
      background-color: #00c06a;
    }
    
    .switch .slider:before {
      position: absolute;
      content: "";
      height: 24px;
      width: 24px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      -o-transition: .4s;
      transition: .4s;
      border-radius: 50%;
    }
    
    .switch .slider:after {
      content: attr(data-off);
      display: block;
      position: absolute;
      left: 100%;
      margin-left: 8px;
      font-weight: 600;
      font-size: 16px;
      line-height: 1.66667;
      min-width: 300px;
    }
    
    .switch .slider:after {
      display: block;
      position: absolute;
      top: 50%;
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
    }
    
    .switch input:checked+.slider {
      background-color: #00A45A;
    }
    
    .switch input:checked+.slider:before {
      -webkit-transform: translateX(28px);
      -ms-transform: translateX(28px);
      transform: translateX(28px);
    }
    
    .switch input:checked+.slider:after {
      content: attr(data-on);
    }
    
    .lbl-left .inp-lbl {
      padding-right: 10px;
      margin-bottom: 0;
    }
    
    .inp-lbl {
      font-size: 12px;
      line-height: 1.33333;
      display: block;
      margin-bottom: 4px;
    }
    
    .lbl-left {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
      flex-flow: row wrap;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }
    
    .switch-input-container {
      padding: 24px;
    }
    

    By default, grand totals are displayed at the end of each row, and subtotals are placed in a separate row at the bottom.

    All the pivot table functionality works the same way: you can drag and drop, expand, collapse, drill down and up the hierarchies, sort and drill through values, and more. Just do it the way you got used to it in the older Excel versions.

    If multi-level hierarchies from your report contain a lot of sublevels, we recommend switching to the compact form which shows them more neatly.