Changing the grid layout

This guide shows how to switch between Flexmonster layouts and describes their differences.

By default, Flexmonster displays data in the compact form. You can also use the classic pivot table and the flat table to analyze data from different angles.

Flexmonster also provides built-in interactive charts. Learn more in the Flexmonster Pivot Charts guide.

How to change the layout

Via UI

Step 1. Select Options () on the Toolbar. As a result, the Layout options pop-up window will appear.

Step 2. In the pop-up window, choose the layout from the Layout section.

Here is the Layout options pop-up window with the selected Layout section

Step 3. Select the APPLY button to see the changes.

In the report

To predefine a grid layout in the report, specify the options.grid.type property:

report: {
  dataSource: {
    filename: "data/data.csv"
  },
  options: {
    grid: {
      type: "classic",
    }
  }
};

Live example

Using API calls

To change the grid layout at runtime, use the setOptions() method. Your code should look similar to the following:

pivot.setOptions({
  viewType: "grid",
  grid: {
    type: "classic"
  }
});
pivot.refresh();

Live example

Compact form

In Flexmonster, data is displayed in the compact form by default. Learn how this layout works:

When multiple fields are placed in rows, inner field members can be expanded or collapsed by interacting with the outer field’s members.
Expanded row members are displayed under the parent member in the same column, without being transferred to a separate column.
When column field members are expanded, they are rendered in a separate row.
The drill-down feature works the same as the expand feature.
Subtotals are displayed in the row or column of a parent member when its children are expanded. You can change this behavior using the grid.showTotals option.
Grand totals for columns are shown in a row at the bottom of the table, and grand totals for rows are in a column at the end of the table. You can configure which grand totals are displayed using the grid.showGrandTotals option.
Grand totals are calculated using the same aggregation function as the corresponding measure.

Here is an example of the compact layout

Check out our compact form live demo.

Classic (tabular) form

The classic pivot table layout is for users who prefer an Excel-like layout of fields. See the key features of the classic layout:

When multiple fields are placed in the rows, inner field members can be expanded or collapsed by interacting with the outer field’s members.
When members of a field in the rows are expanded, they are shown in a separate column.
When the field members in the columns are expanded, they are placed in a separate row.
Subtotals for columns are shown in a separate row after each member.
Subtotals for rows are displayed in the parent member when its children are expanded. You can change this behavior using the grid.showTotals option.
Grand totals are displayed at the bottom of the table in a separate row and at the end of the table in a separate column. You can configure how the grand totals are displayed using the grid.showGrandTotals option.
Grand totals are calculated using the same aggregation function as the corresponding measure.

Here is an example of the classic layout

Note The header area is frozen and can not be scrolled. If your report contains many expanded fields or deep multilevel hierarchies in rows, the frozen area may occupy too much space, and the values may not be visible:

Here is an example of the classic layout with no space for scrollable content

Such a configuration may complicate the work with Flexmonster, so we recommend using the compact form.

See the classic view demo.

Flat form

The flat table represents the dataset in its original structure. It is the most basic layout. Check out the key characteristics of the flat view:

Each field is displayed in a separate column.
Data is presented in non-aggregated form.
Grand totals are displayed in the first row of the table only for the measures. You can change this behavior using the grid.grandTotalsPosition option.
For measures, different aggregations can be applied.

Check out our live demo with a flat table.

Note Since the flat table displays non-aggregated data, performance may decrease when connecting to large datasets. In such cases, consider switching to the compact or classic (tabular) pivot layout.

Changes to Flexmonster Software License Agreement