All documentation
  • Introduction
  • Connecting to data source
  • Browser compatibility
  • Documentation for older versions
  • 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