Wrap text / increase cell height within cell for table

Hi all,

I did not manage to find a way to wrap cell content and column name within a table.

So far I have this table :

image

and would like to increase cell height for column name and other rows and wrap text / content within these cells.

Any ideas ?

Many thanks

1 Like

Hi @tm57!

This can be done for the contents of cells, but unfortunately not for the column titles. To get cell text to wrap within the column cells, there is a setting called 'Allow Overflow' inside the column settings:



Hopefully this helps!

1 Like

Hi @ben

Many thanks for your answer. I tried the overflow but not seems to do the "wrapping" within my table.

Column "Piece" for example:


For the headers if it is not possible how to decrease police size ? I tried to do it with a CSS script but did not manage to select the table with this script:

Do you see an issue here ?

Many thanks!

2 Likes

Just managed to do it with CSS custom below :

._retool-TableWidget .cell-container {
font-size: 10px!important;
overflow-wrap: break-word!important;
}

._retool-TableWidget .rt-column-header-name {
font-size: 10px!important;
}

._retool-TableWidget .rt-th.rthfc-th-fixed.rthfc-th-fixed-left.rt-resizable-header.-cursor-pointer {
overflow-wrap: break-word!important;
}

._retool-TableWidget .rt-th.rt-resizable-header.-cursor-pointer {
overflow-wrap: break-word!important;
}

However and as you mention it is not working for column name. As my column names are a bit long , do you know if it is possible to add a n overhead line / kind of categories / Top level headers ?

6 Likes

Since this is the conversation that pops up with googling how to wrap text in Retool and is from 2021, I want to point out that the new way to do this is to select the column type as "Multiline Text" - not just Text or Auto - when looking at the column settings for a table. This will allow the row cell to show the entire content of the text in that column row.
As for showing the entire column name, I have not found another way other than click-and-drag to the desired column length.

5 Likes

This seems to only work on the legacy table

1 Like

Hey David! Thank you for the callout. I created an internal feature request to introduce the ability to wrap both column text and headers in the new table :slight_smile: Will keep this thread updated!

3 Likes

Any update or workaround as to how we can wordwrap text in the new table?

Hey @maillme, thanks for bumping this! The new table should now support the Multiline String column type:

You can also set your table's Row height to Dynamic to fit all of your text:

Multiline columns still aren't supported at the moment. As a temporary workaround you might try something like the following custom CSS, replacing table1 with your table's id:

._retool-table1 ._TZGEl._X9iXl span {
    white-space: pre;
}

._retool-table1 ._xov9f._x4j1F {
    height: max-content !important;
}

Let me know if that works!

1 Like

Any update on the column names allowing wraptext or a css workaround?

Had luck with this custom CSS:

/* adjust table header text wrap */

  • ._xov9f.x4j1F .-pifF._4EzI8 {
    white-space: wrap
    }

/* adjust table header heights */

  • ._xov9f._x4j1F {
    height: 50px;
    }

/* adjust table header text location */

  • ._xov9f._x4j1F ._fDjNG {
    align-items: start;
    }

image

2 Likes

No update yet on text wrapping in column headers. Thanks for posting the CSS you're using here @SplinteredGlassSolutions!

1 Like

hey @Kabirdas how's it looking?

We haven't been able to prioritize this yet on our roadmap :disappointed: We'll post back here with any updates we get internally

2 Likes

"It's on our roadmap" should be Retools slogan. Starting to get comical the number of times I hit a roadblock only to Google and be brought to a forum post where you're responding the same thing. It's like you don't even use your own product.

i've seen a different perspective: a ton of features and changes rolling out as a result of user feedback, and staff in the forums who actually use Retool. granted, we've joined relatively "late", so most of the feature requests from 2022 for example are already implemented for us.

2 Likes

What's the best practice to upvote a required feature?

1 Like

Exactly what you did, commenting and upvoting helps the feature request being more noticeable. Also attending office hours and discussing the reasons behind the feature request adds more context to the retool team when they make a ticket for the feature.

3 Likes

I was looking for the 'Allow wrapping' toggle in the top post and realised it's from 2021 :laughing:
Also expressing my interest in such a feature!

Hey all!

Though I would post this here. I was using the solution provided by @SplinteredGlassSolutions until today when the HTML structure of the table component changed. This has happened a couple of times so I tried finding another solution based on property selectors. It is working well as of now and hopefully, it is a bit more permanent.

div[data-row-index="-1"]{
  height:80px !important;
}

span[data-testid*="HeaderCellContents"]{
  text-wrap: wrap !important;
}
2 Likes