components icon indicating copy to clipboard operation
components copied to clipboard

[Grid] Truncation of content in column

Open ftakuipers opened this issue 1 year ago โ€ข 1 comments

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

Screenshot 2024-08-08 at 14 51 55

๐Ÿงข Your Product/Team

Magister

### Tasks
- [x] check best UX practices for such situations (Alvaro)
- [ ] implement right solution

ftakuipers avatar Aug 08 '24 12:08 ftakuipers

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.

arecuenco-dsgn avatar Aug 15 '24 07:08 arecuenco-dsgn