-
-
Notifications
You must be signed in to change notification settings - Fork 622
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Table layout is broken with long text #1018
Comments
Please reproduce the issue in a codepen with a minimal example. |
This behavior is due to the algorithm used to distribute the size on the table columns which is inspired by HTML table algorithm, each column will get a minimum width proportional to its longest word compared to the other columns, since you have a column with a very long text with no spaces in it, other columns with short words will get a tiny share of the table width. If I add the same content to an HTML table with the proper size and a So we're actually on par with the HTML behavior here. You have two options to solve your issue : |
See this example with a very long text but with spaces between the words and an email column with no spaces. |
Okay, thanks! Is there no way to apply |
That's not what you want, maybe a |
I'm currently rewriting the width options for v4 to give more control to fix situations like this, the new API will look like this: cellWidth: 'auto' | 'min-content' | 'max-content' | number
minCellWidth: 'auto' | 'min-content' | 'max-content' | number
maxCellWidth: 'auto' | 'min-content' | 'max-content' | number min-content : The minimum width required to fit the content in a readable manner (with no word-breaking). Using this, you could do one of the following : 1- Set // ...
styles: {
minCellWidth: 'min-content',
},
columnStyles: {
2: {minCellWidth: 'auto'},
},
// ...
// Or
// ...
styles: {
},
columnStyles: {
0: {minCellWidth: 'min-content'},
1: {minCellWidth: 'min-content'},
3: {minCellWidth: 'min-content'},
},
// ... 2- Set // ...
styles: {
},
columnStyles: {
0: {cellWidth: 'max-content'},
1: {cellWidth: 'max-content'},
3: {cellWidth: 'max-content'},
},
// ... 3- Set // ...
styles: {
},
columnStyles: {
2: {maxCellWidth: 100},
},
// ... For reference, this is how it looks like with auto width: But it could be improved to minimize word-breaking by default in this scenario by prioritizing shrinking the longest columns so the short ones don't break, I'll work on that next. @mtdvlpr @simonbengtsson Any suggestions/feedback ? |
@mmghv, sound great! |
If possible to solve without introducing additional API I agree that would be ideal but otherwise suggested API sounds great 👍 |
@simonbengtsson This specific scenario will be solved with the improved algorithm, but the new API gives more control in general for adjusting the table layout in many scenarios without resulting to hard-coded values which is not ideal with dynamic content. We already had So the only breaking change here is changing |
When I have one cell with a very long text, the table layout breaks. See reproduction or example output.
I expect the long cell to break the text and increase its height to fit the long text.
The layout is also broken for
styles: { overflow: 'ellipsize' }
. See example output with ellipsizeThe text was updated successfully, but these errors were encountered: