Get Free Trial
Get Free Trial
  1. Pivot Table demo
Data Sources
  1. MS Analysis Services
  2. Elasticsearch
  3. JSON and CSV
Views
  1. One million rows
  2. Pivot charts
  3. Dashboard
  4. Classic (tabular) view
  5. Flat table
Integration
  1. With amCharts
  2. With Highcharts
  3. With FusionCharts
  4. With Google Charts
Other
  1. Themes
  2. Localization
  3. Heat map
  4. Custom cells
  5. Live data update
  1. More examples

JavaScript Pivot Table: Classic (tabular) view

The classic (tabular) form is a pivot table 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.

For the best experience

Play with the demo on a larger screen: save this link for later or watch the video review now.


Edit in JSfiddle Get Free Trial 
    const pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    dataSource: {
      type: "csv",
      filename: "data/data.csv"
    },
    options: {
      grid: {
        type: "classic"
      }
    },
    slice: {
      rows: [
        {
          uniqueName: "Country"
        },
        {
          uniqueName: "Business Type"
        }
      ],
      columns: [
        {
          uniqueName: "Color"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [
        {
          uniqueName: "Price",
          format: "currency"
        }
      ],
      expandAll: true
    },
    formats: [
      {
        name: "",
        thousandsSeparator: ",",
        decimalSeparator: ".",
        decimalPlaces: 2
      },
      {
        name: "currency",
        currencySymbol: "$"
      }
    ]
  }
});

function changeLayout(layoutType) {
  pivot.setOptions({
    grid: {
      type: layoutType
    }
  });
  pivot.refresh();
}

function setRepeatLabels(enabled) {
  pivot.setOptions({
    grid: {
      repeatAllLabels: enabled
    }
  });
  pivot.refresh();
}

    <button onclick="changeLayout('compact')">Use compact form</button>
<button onclick="changeLayout('classic')">Use classic form</button>
<button onclick="setRepeatLabels(true)">Repeat labels on</button>
<button onclick="setRepeatLabels(false)">Repeat labels off</button>

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

    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're used to in Excel.

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

    See our live examples

    Dashboard Flat table
    Prev Next

    Frequently asked questions

    Can't find your answer here?
    Visit the FAQ page

    Flexmonster Pivot Table & Charts is a JavaScript pivot table component for adding interactive reporting and data analysis to web applications. Users can summarize, filter, sort, and explore data in pivot tables and charts, drill into results, and export reports.