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!
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
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
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.
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?
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.
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.
Awesome thank you!!
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.
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.