[Grid] Truncation of content in column
Provide a general summary of the feature here
As just discussed with Jeroen, we would like to have the option to decide for individual columns in a table grid how long content should be dealt with. We want to be able to choose between truncation ('...') or multiline text.
๐ค Expected Behavior?
Truncated text on specific columns in a table grid. (For when the information in that column is not relevant enough to display in its entirety or if the information can be seen in a 'detailkaart') When the text is truncated, the full text can be viewed through a tooltip.
๐ฏ Current Behavior
Currently, it is only possible to let the text overflow to the next line, therefore increasing the lineheight of that row. We mostly want all rows to have the same lineheight.
๐ Possible Solution
Maybe some kind of variant/variable of a column where the content of that column gets truncated ('...'), instead of changing to multiline text, when the content gets too long for the cell width?
๐ฆ Context
We deal mostly with large overviews of i.e. a lot of students. If the lineheight differs between rows, it becomes a lot harder to find the information you're looking for as a user.
๐ป Examples
๐งข Your Product/Team
Magister
### Tasks
- [x] check best UX practices for such situations (Alvaro)
- [ ] implement right solution
I didn't find any problems applying the solution provided. But I think we have 2 paths to implement it:
Solution A
Applying the property no-wrap to the table to fix all the rows to one line, and all the content will truncate.
Solution B
Applying the no-wrap to the column makes only the content in the column's cell truncate.
Combine A+B
This property no-wrap could be applied to the table (affecting all the rows) or a specific column (affecting only the cells inside).
When the text is truncated, the tooltip behaviour must be implemented in all the solutions to provide the user with a way to check the content.