Long text in DataTable header should wrap to two lines and then scroll; long table body cell text should scroll

[dakahn]

ref #5048

Our current implementation of Datatable doesn't follow the design specifications when handling very long header or cell text.

- header text should wrap to two lines and then begin to scroll - table body cell text should scroll, but not wrap

Instead it does this:

[asudoh]

Refs https://drafts.csswg.org/css-overflow-3/#propdef--webkit-line-clamp (Though IE11 doesn't support it)

[gmoehler]

I doubt that scrolling within a cell is a suitable solution for long cell content in many use cases, because

• a user might be interested to see the content of a cell at one glance. with scrolling only part of the content is visible. Something like a tooltip (with the option to select/copy to clipboard of the content of the cell) seems like a better approach
• In a table with many columns the previous point is even worse. I dont think that a scrollbar fits nicely into this cell nor is it practical to scroll when only a small portion is visible within the cell.
• a user might be interested in many results of a column, scrolling each cell would be a burden. Here a dragable column width would probably best. Although it still might be required to deal with truncated cell content

[dakahn]

@aagonzales Tagging you in here to maybe discuss our thinking behind the scrolling spec

[aagonzales]

Its not scrolling within a cell, the whole row/table will horizontally scroll. Like what Lightening is doing in these examples (look at Base). The table rows retain their original row height and horizontally scrolls the whole table.

https://www.lightningdesignsystem.com/components/data-tables/

[aagonzales]

If content is excessively long then it shouldn't be displayed in a data table row cell. Those types of content should utilize the expandable table row to show long content. If long data strings are being put into data table cells then that is a matter of poor design decisions.

[gmoehler]

@aagonzales I generally agree with your point, but it only seems to address "curated" tables - i.e. tables in which the column structure is known at ui design time. In our case (IBM Cloud SQL Query) we are previewing arbitrary tabular (e.g. csv) data that we retrieve from Cloud Object Storage. Columns could contain various (previously unknown) types of data (that we all convert to string) at unknown size. A user would first like to see a suitable "overview" of the tabular data, where long cell data would be truncated. Then he may want to "drill" into the data of one column or cell to see all (or at least more) of that data. Varying the column width would be one option to show more of a column's content (I am looking at https://github.com/carbon-design-system/carbon/issues/4751 for that purpose), tooltips with the option of a "copy to clipboard" would be our preferred option to show the content of one cell. Here is how our ui along with a data table looks today (it uses the ap-components table, which we want to replace by a sticky header DataTable - you can see that columns are resizable and broad tables are horizontally scrollable):

[aagonzales]

We want the default to be the horizontal scroll and then I think we can allow alternate ways to truncate data. This issue is to change the default.

[gmoehler]

Agreed - but then we need another issue to deal with arbitrary content (aka alternate ways to truncate data). Shall we re-open https://github.com/carbon-design-system/carbon/issues/5048?

[dakahn]

I've reopened the issue referenced as an open proposal for an alternative text truncation patteer @gmoehler

[sstrubberg]

Asking for text wrap setting. We need a conversation around text wrap settings. @vsnichols Check to see how it relates to horizontal scrolling. This needs more design exploration.