Managing grid layout

Flexmonster provides two grid layouts for visualizing data: pivot and flat. This guide explains how these layouts work and how to configure them.

Pivot table

With the pivot table, you can analyze your data from different angles by grouping fields in rows and columns. The grid displays aggregated values, as well as their totals and grand totals.

You can initialize the pivot table control using the method or tag:

Flat table

The flat table displays data in a raw, non-aggregated form. Each record is displayed as a separate row, with each field represented as a column. Grand totals can be calculated and shown per column.

You can initialize the flat table control using the method or tag:

Composite control

The composite control combines multiple Flexmonster components into a single UI, including both pivot and flat tables. It allows switching between pivot and flat layouts at runtime.

You can initialize the composite control using the method or tag:

On the toolbar, you will see Flat and Pivot tabs to change the layout at runtime:

Note By default, after the Flexmonster control is initialized, it displays a pivot view. See how to change the default view of the Flexmonster control.

Layout options

Layout options define how data and interface elements are arranged and displayed within the grid.

Each control in Flexmonster has its own object with configuration properties:

The pivot table control uses PivotTableOptionsObject.
The flat table control uses FlatTableOptionsObject.
The composite control uses FlexmonsterControlOptionsObject.

Change the default view of the Flexmonster control

By default, the Flexmonster control displays a pivot view after initialization. You can change it to a flat table by specifying the viewType option:

const flexmonster = fm3.Controls.Flexmonster("#pivot-container", {
  stateId: "fm-state",
  options: {
    viewType: "flat"
  }
});

Live example

To switch back to the pivot table, remove the viewType option or set it to "pivot".

Set headers visibility

To hide the spreadsheet headers with column and row numbers on the grid, set the showSheetHeaders option to false:

Manage totals in the flat table

Display totals on the grid

By default, the total row in the flat table is hidden. To show totals, set the totalRowPosition option to "before" or "after", depending on the necessary total row position:

Manage totals of a specific field

In the flat table, you can configure the visibility of a total cell for each field separately.

Note By default, totals are hidden in the flat view. Learn how to show totals on the grid.