Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

Is there an easy way to customize flat table dimensions?

Answered
juliet.mariniello@workday.com asked on October 20, 2020

I’m interested in making tables more customizable for end-users via (a) expanding column width/row length (b) wrapping data & (c) align data to the top? Are any or all of these possible & if so could you provide examples of documentation? Thank you!

7 answers

Public
Milena Pechura Milena Pechura Flexmonster October 22, 2020

Hello, Juliet,
 
Apologies for the late response and thank you for your questions.
Please find below our comments regarding each point.
 
a) expanding column width/row length
To expand column width and row length we kindly suggest configuring tableSizes property of the report object. Please have a look at the example.
 
Also, we would like to mention that the end users can resize columns and rows by dragging the header boundaries, and double-click on column or row headers to set them to the default size. After the changes are applied, the report will be exported with new sizes.
 
b) wrapping data
Please note that Flexmonster provides the following logic:
If the content becomes bigger, the column increases its width. When the width reaches 480px, the content that doesn’t fit into the cell is cropped.
 
We would like to kindly inform you that our component does not provide the wrapping data feature.
However, our team suggests two workarounds to see the whole content of the cell :
 
In the first example, we defined

.wrapped {
white-space: normal !important;
height: 80px !important;
}

in the CSS box to wrap the text and increase the height of rows. In the customizeCellFunction, we added the "wrapped" class to the cell.
 
The second example shows the full text after hovering over a cell. With the help of customizeCellFunction, we changed the cell text to the span tag with class="tooltip" and title containing the full text.
 
c) align data to the top
If the desired component behavior is moving the cell content to the top of the cell, we suggest using CSS to achieve that: e.g., padding-top: 1px !important;.
Here is an example for illustration: http://jsfiddle.net/flexmonster/safqdx3e/.
 
Please let us know if our recommendations work for you.
Waiting for your reply.
 
Best regards,
Milena

Public
juliet.mariniello@workday.com October 22, 2020

Thank you so much for the quick response! Quick followup question, the example provided was for a pivot – do the same formulas work for a flat table? 

Public
Milena Pechura Milena Pechura Flexmonster October 23, 2020

Hi, Juliet,
 
Thank you for your question.
 
If the mentioned example is this one with the tableSizes config, we would like to confirm that tableSizes can also be specified in the flat view.
 
To apply new width and height in the flat view, we suggest using the idx property both for columns and rows. Our team has prepared a sample for illustration: https://jsfiddle.net/flexmonster/3pzymLak/
 
Also, we would like to inform you about the new feature we will release in a week, ETA 02 Nov. The new API call will allow configuring the tableSizes dynamically. We assume that this method can be helpful for your case. For example, for the cells resizing after the text is wrapped.
 
Our team will notify you as soon as the version with the described feature is released.
 
Please let us know if any other questions arise.
 
Kind regards,
Milena

Public
Milena Pechura Milena Pechura Flexmonster November 3, 2020

Hello, Juliet,
 
We are glad to announce that new methods getTableSizes() and setTableSizes() were added to dynamically apply specific grid sizes if needed.
 
This is available in the 2.8.19 version of Flexmonster: https://www.flexmonster.com/release-notes/
 
You are welcome to update the component.
Here is our updating to the latest version tutorial for guidance: https://www.flexmonster.com/doc/updating-to-the-latest-version/
 
Please let us know if the new methods are helpful for your case.
 
Best regards,
Milena

Public
juliet.mariniello@workday.com November 3, 2020

Awesome thank you!!

Public
Milena Pechura Milena Pechura Flexmonster November 11, 2020

Hi, Juliet,
 
Hope you are doing well!
 
We are just checking in to ask if you have successfully implemented the desired component behavior.
Were our suggestions regarding a) – c) points and the new API calls helpful? Is there still anything we can assist you with?
 
Our team would be glad to hear your feedback.
 
Kind regards,
Milena

Public
Milena Pechura Milena Pechura Flexmonster 2 days ago

Hello, Juliet,
 
We were wondering whether our suggestions and new methods helped you to make tables more customizable for end users.
 
Please let us know if everything works fine for you.
 
Best regards,
Milena

Please login or Register to Submit Answer