☝️Small business or a startup? See if you qualify for our special offer.
+
All documentation
Connecting to data source

Resizing rows and columns

This guide describes how to set custom row height and column width in Flexmonster. You can resize:

Resizing a specific row or column using report configs

You can set custom row height and column width in the following ways:

  • Via UI
  • In the report
  • Using API calls

Via UI

Resize rows and columns via UI by dragging header boundaries:

Resizing a row and a colunm via UI

In the report

If you want to preset a row height and a column width in your report, we recommend the following approach:

  1. Resize the necessary rows and columns via UI.
  2. Save the report.

Your report will now contain the custom table size configurations in the tableSizes property. If needed, you can edit the configurations programmatically. To learn more, see the TableSizeObject.

Using API calls

You can set custom row height and column width at runtime using the setTableSizes() API call:

pivot.setTableSizes({
columns: [
    {
     idx: 0,
      width: 160
    },
   // Other columns
  ],
  rows: [
    {
      tuple: ["category.[cars]"],
      height: 80
    },
    // Other rows
]
});

Live example

To see the current row height and column width, use getTableSizes().

Note If you need to set custom table sizes along with other report parts, use the setReport() API call Live example.

Setting custom width and height for all rows, columns, or headers using CSS

You can resize all rows, columns, or headers using the following CSS classes:

  • .fm-grid-row and .fm-grid-row-mobile to set the height of rows.
  • .fm-grid-column and .fm-grid-column-mobile to set the width of columns.
  • .fm-grid-header and .fm-grid-header-mobile to set the width and height of headers.

Live example

See also