List of all demos

JavaScript Pivot Table: flat view

A flat table is a simple form of Flexmonster Pivot for displaying initial data in an Excel-like data grid view.


    new Flexmonster({
      container: "#pivot-container",
      componentFolder: "https://cdn.flexmonster.com/",
      toolbar: true,
      height: 370,
      report: {
        dataSource: {
          type: "csv",
          filename: "data/data.csv",
        },
        options: {
          grid: {
            type: "flat",
          },
        },
        slice: {
          columns: [{
              uniqueName: "Country",
            },
            {
              uniqueName: "Category",
            },
            {
              uniqueName: "Color",
            },
            {
              uniqueName: "Price"
            },
            {
              uniqueName: "Discount"
            },
          ],
        },
        formats: [{
          name: "",
          thousandsSeparator: ",",
          decimalSeparator: ".",
          decimalPlaces: 2,
          currencySymbol: "$",
        }],
      },
    });
    
    <div id="pivot-container"></div>
    

    This minimalistic non-hierarchical grid view allows end-users to show CSV and JSON data in a row-by-row manner — in the same way as the records come from the data source. Cells of the flat table contain raw, nonaggregated values.

    The features of the flat grid are the same as for the classic (tabular) and compact layouts. Via the Field List, an end-user can choose which columns to show, how to order them, filter, and sort. Plus, it's possible to enable grand totals of the measures and show them at the top row of the table.

    What makes this form distinct from others is multi-column sorting: use Ctrl + click to sort the records by multiple fields.

    To quickly change the view angle of your report, you can switch to the classic (tabular) or compact forms.