How to show data in entire table

Answered
Sai asked on October 16, 2024

Hi,

I am getting empty spaces after my data like in Image I want to fill that empty data or I dont want to show those empty rows and columns, Tried many ways but not worked, 
Note I am not using any HTML, CSS files my project is on react, type script (.tsx) files, MUI.
Any solutions?

 

Attachments:
flex.PNG

2 answers

Public
Maksym Diachenko Maksym Diachenko Flexmonster October 21, 2024

Hello, Sai!

Thank you for reaching out to us.

Please note that Flexmonster does not provide an out-of-the-box solution for rescaling the grid to fit the entire space. However, several options are available that might work for you.

Increasing cell sizes with CSS
One of the available solutions is to override Flexmonster's styles to increase cell size, including font size, row height, and column width. This way, cells with data would use more space, leaving almost no space for blank cells: https://jsfiddle.net/flexmonster/vc9zn8h7/

Rescaling the grid container to wrap the content
Contrary to our previous suggestion, this approach dynamically adjusts the size of the Flexmonster container to fit all data. If the data uses less space than the available pivot container area, the container is reduced, leaving less empty space. This solution is provided in this Help Center thread: https://www.flexmonster.com/question/customization-of-grid-cell-to-fit-only-the-data-we-have-not-any-extra-rows-or-columns/

Please let us know if one of the suggested approaches works for you.

Best Regards,
Maksym

Public
Maksym Diachenko Maksym Diachenko Flexmonster October 29, 2024

Hello, Sai!

Hope you are doing well.
We are wondering if you have tried some of our workarounds that allow utilizing the whole grid space.
Please let us know if one of them worked for you.

Best Regards,
Maksym

Please login or Register to Submit Answer