How to manage the size of a pivot when embedded in a site

posted on September 2nd, 2025

Answered

Franck Baron asked on September 2, 2025

We use pivot table throughout our portal, and one issue we cannot solve is related to the size of the container on the screen... it always shows loads of empty rows/colums, taking valuable screen estate.

We understand we can set pivot size to 100% and let pivot adjust to container.

What we don't know is how to get the actual size of pivot, how many pixels height and width, by api? When user collapses, expands, adds a filter... always hide/show more rows/columns as needed.

We are looking for a native flexmonster api to provide that as part of rendering the pivot. We are considering alternatives using DOM but those are fragile and delayed to no a good user experience.

In this example, the blue is what we expect to see, just a readonly table with few numbers, so 3 changes needed:
- hide the filter
- hide the fields selector on the right
- hide the last column which is empty

We have other examples, where we have 8-10 rows that are empty when we display, they may be used later if the user expands the rows... but default 80% showing empty rows ;(

Thanks

Attachments:
20250902 just pivot readonly.png

6 answers

Public

Solomiia Andrusiv ⋅ Flexmonster ⋅ September 2, 2025

Hello, Franck!

Thank you for your questions.

Kindly note that Flexmonster is designed as a dynamic data visualization component to visualize large amounts of data. So, Flexmonster is always ready to adapt its size to the changes in data or report within the width and height of the container. For example, when new data with longer field names is loaded, we dynamically increase the column width depending on the label length, and add a horizontal scroll if necessary. Flexmonster also implements a virtual scroll feature, which needs a static data area(size of the container) to know how many rows need to be loaded beforehand.

The default height of the row is 30px, and the default column width is 100px, so you are welcome to calculate the necessary grid size depending on your row count for a read-only static table. However, please note that rows and columns can still be resized manually.

We have also prepared a JSFiddle sample showing how to do the visualization from the provided screenshot in Flexmonster: https://jsfiddle.net/flexmonster/cgm6vqyb/.
In this example, we used the following steps to achieve the readonly mode:

readonly option to disable dragging, drilling-down, etc
showReportFiltersArea: false to hide the applied filters
configuratorButton: false to hide the "Fields" control on the right(added for sample, as this control is hidden in readOnly mode by default)
Dynamically calculated the grid sizes using the default 30x100px cell size. Please note that the minimum recommended height of the pivot is 200px, further decreasing the height can impact the component's appearance.

Hope you will find our answer helpful.

Kind regards,
Solomiia

Public

Franck Baron ⋅ September 3, 2025

Thanks, it is very helpful to see those options shared. Very clear for that example.

For rows/columns values, fixed values work in this example well, but we have 50+ different pivots with various sizes, datasets, dynamic for users.

When we open a campaign report like the below

1/ If we show only line per day, sometimes it is one day, sometimes the data shows 7 days... so rows=1+1 or rows=7+1 => how could we get the new 'rows' and 'columns' on load?

2/ When the user decides to expand, or add a new dimension=> how could we get the new 'rows' and 'columns' efficiently on user interactions?

Is there a function to provide that information within flex apis? or do you suggest reading the griddata, or even the DOM?

Attachments:
20250902 pivot table empty rows.png

Public

Solomiia Andrusiv ⋅ Flexmonster ⋅ September 3, 2025

Hello, Franck!

Thank you for your swift response.

You are welcome to check the following JSFIddle to see how to dynamically manage the grid size on user actions: https://jsfiddle.net/flexmonster/bae4x237/.

Here are also some resources that may be helpful to adjust grid sizes:

list of all Flexmonster API calls: https://www.flexmonster.com/api/methods/.
list of all Flexmonster events: https://www.flexmonster.com/api/events/.
for the case shared in the screenshot, we also suggest trying the showHierarchyCaptions option to make the view more compact.

Hope you will find our answer helpful.
Feel free to ask if there are any other questions.

Kind regards,
Solomiia

Public

Solomiia Andrusiv ⋅ Flexmonster ⋅ September 10, 2025

Hello, Franck!

Hope you are doing well.

Our team is wondering if you had some time to check out the provided example on how to update Flexmonster grid size dynamically. Could you please let us know it works well for your case?

Looking forward to hearing from you.

Kind regards,
Solomiia

Public

Franck Baron ⋅ September 11, 2025

Very clear example, so our team has enough to implement this in our platform.

We have the answers we need, thank you.

Public

Solomiia Andrusiv ⋅ Flexmonster ⋅ September 11, 2025

Hello, Franck!

Thank you for your feedback.

We are happy to hear our example was helpful.

Feel free to reach out to us in case of any other questions.

Kind regards,
Solomiia

How to manage the size of a pivot when embedded in a site

6 answers

Please login or Register to Submit Answer