Carbon: DataTable with Pagination component does not wrap long words

[feliperyba]

Detailed description

Currently working with DataTables, I noticed that the nowrap /wrap functions was not being applied into the columns.

Tried different types of approach using white-space and word-wrap and no results into the table.

This happens in any browser. Also, I tried the wrap into different components and we can see the same behavior.

I was able to edit a code pen and made it work with the simple DataTable, but this does not work in the DataTable with Pagination component.

Additional information

[feliperyba]

it's important to say that in the second image I was also using the word-wrap : break-all;

But this only works with the min and max width set

[marijohannessen]

@bsonefeld do we have any guidelines around when the text should wrap in a table?

[bsonefeld]

@aagonzales I'm not sure if we had thought of a truncation patterns for table columns. Do we use the ... for a specific character count?

[aagonzales]

The column headers should wrap but the content in the table should respond like the following:

• All columns should shrink to the smallest possible size without causing content to over flow to the next line. Once all columns are as small a width as possible then the tables triggers horizontal scroll and the user must scroll left and right to view content.
• This keeps the rows even heights which is important for scan-ability
• This is how the design is intended to work.
• Content should not truncate unless its non-important text then it can ...
  
  
  
  • If column content is regularly very long then consider putting that information in an expandable table instead.
  
  

[tay-aitken]

@carbon-design-system/ui this needs to be implemented now that guidelines have been created.

[joshblack]

Will bring it up and try and get it prioritized accordingly 👍

[dkaushik95]

I think if we add a scrolling behavior as a default it will solve this problem. If the string is small enough to overflow, it will behave normally, otherwise, it will start the scrolling behavior.

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. Thanks for your contributions.

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale[bot]]

As there's been no activity since this issue was marked as stale, we are auto-closing it.