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!

10 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 November 23, 2020

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

Public
juliet.mariniello@workday.com January 14, 2021

Hi Milena,
 
I had another question on this topic – is it possible to set parameters so that the end user can Save reports which RETAIN all settings (eg column width/height etc)? Thanks again!

Public
Dmytro Zvazhii Dmytro Zvazhii Flexmonster January 15, 2021

Hello, Juliet,
Thank you for posting your question here.
 
Yes, it is possible to retain all settings along with column width/height.
We recommend checking on save() API call. It allows saving all the necessary configs as a file in JSON format either to clients computer or to some remote end-point. That JSON file can be used further to restore the view. Please note, that you can also press Save button on the toolbar. It uses the same save() API call.
In case you need to process the configs with your code, please check on getReport() API call. It allows getting the same configs as save() API call but in a more convenient way for some extra coding.
 
Please let us know if the suggested approach solves your case.
Regards,
Dmytro

Public
juliet.mariniello@workday.com January 15, 2021

Awesome – thanks so much for the quick response!

Please login or Register to Submit Answer