Column width and beforeValueRender

Tags: #<Tag:0x00007efc6b697760> #<Tag:0x00007efc6b6975a8>
#1

We have a beforeValueRender function which truncates the text rendered into the DOM for cells which exceed a certain character count. The full text remains available for the user to view and manipulate upon editing the cell content.

In our table’s settings object, we use the columns object to define properties of every column, including specific widths for every column. These defined widths cause some text cells with longer contents to grow in height. However, some of our users would like to remove our preset widths and allow the truncated text of every cell to stretch the width of the columns, so that every row in the table consists of one line of text. So we have added a button to the page which removes the width property from every column. When the button is clicked, the columns do indeed expand in such a way that every row in the table consists of one line of text.

However, we have found that the columns expand to accommodate the full, non-truncated text that is not displayed to the user. We would prefer the columns to expand only as far as the truncated text that is being rendered.

Is there a way to make the column only as wide the truncated, rendered text rather than the full text in the cell?

#2

Hi @dank

That sounds like a pretty complex custom solution. Could you send me a demo that shows the current setup?

#3

Hi @aleksandra_budnik

The behavior shown by this JSFiddle is a minimal but adequate demonstration, I think:
https://jsfiddle.net/hzn47rs6/11/

The beforeValueRender function is configured to display only the first 15 characters of each cell.
The initial column widths are all 75 pixels, so each cell contains 2 lines of text.
If you. click the ‘Delete widths’ button, the column widths expand beyond the minimum width that is needed to show the truncated text. Instead, the columns are as wide as the underlying text within the cells.

In our actual application, this is occasionally a problem because some of the cells contain a massive amount of text, which is why we decided to show truncated text .

It would be great if we had a way to ensure column widths expand only as far as necessary to show the longest truncated text.

#4

Hi @dank

Sorry for the delay (the whole team is working hard to publish a new major version of Hadsontable).

I see what you mean. On the Delete widths click I would add a custom cell renderer. Would this meet your project requirements https://jsfiddle.net/8f0ke1xv/?

#5

Thanks @aleksandra_budnik , and the delay is no problem - it is good to hear the whole team is focused on publishing a new major version.

The custom cell renderer you suggested is working very well for the most part. I removed the ‘width: 120px’ rule from the CSS class because some of our columns need to be narrower and some need to be wider. And for most of the columns this modified version of your solution works perfectly.

There are still some columns in our app which refuse to shrink to the widths of the truncated texts. I will try to put together another demo which shows this.

#6

It turns out we had other custom rendering logic applied at the column level which was occasionally overriding the instance-level custom renderer. After finding these renderers and modifying them during the button click handler, everything works as expected.

Thank you so much for the help!

#7

Oh, that’s great to hear that the issue is solved. Thank you for the update.

#8