Carbon: Table horizontal scroll

[vsnichols]

Summary

We are requesting the ability to horizontally scroll the data table. This functionality will enable users to easily read their table at smaller viewport sizes, including mobile, as well as to add additional columns, a related functionality requested here https://github.com/carbon-design-system/carbon/issues/4687.

Default column width is set to table content by default (though we would recommend a max width). Horizontal scrolling will kick in if the viewport is too small to contain the complete set of columns at that width.

Proposed design:

Motion (for general concept only - disregard toolbar coloring, etc.)

Note: This coded mockup does not use the actual left navigation component, which would collapse more smoothly.

Justification

Currently Carbon tables lack responsive behavior, a major factor in making IBM Cloud unusable at small viewports. Customers use small desktops, open multiple windows side by side. There is also a need for users to access the site on mobile to manage support cases, especially now that the IBM Cloud app is being deprecated. Teams outside IBM Cloud like Watson IoT need to support mobile for customers conducting field work, and responsive design is a key need for companies beyond IBM.

This functionality also supports editable columns, required to avoid a loss of functionality for Softlayer users.

Desired UX and success metrics

The desired UX is that users are able to easily read table content at any viewport size.

"Must have" functionality

• Left column freezes once horizontal scrolling is activated, so that the user can retain context.

Specific timeline issues / requests

This work is related to the CloudPAL-sponsored project to contribute back a more robust data table to Carbon by mid-December, as part of Carbon X / CloudPAL adoption. As such, we have a very tight timeline. We would like teams to be able to start consuming these tables in January.

Our team is working closely with Carbon design and development and trying to anticipate accessibility concerns.

Available extra resources

Holman from ICED development squad in Toronto, possibly CloudPAL developers. Holman is currently working on developing this feature.

[Ragha100]

Hi Team
Where can I see this feature in Carbon Design System, is it available in the Sketch documentation/Carbon's Website. Is it available in Carbon Angular or any tentative time line.

[sharonlymer]

I'd like to suggest a slight modification to the current design. Since the fixed column area doesn't scroll, begin the scroll bar to the right of any fixed columns rather than having it appear below these columns. I believe this is consistent with the way Excel handles horizontal scrolling.

[sharonlymer]

Our IBM offering has a need for this capability as we migrate to Carbon.

[emyarod]

@vsnichols just wondering, have there been any updates on this? I'm not sure if this was planned as an external contribution to the library

[joshblack]

Going to close this out due to inactivity :eyes: Let me know and I'd be happy to re-open!

[joshua-vaughn]

This is absolutely necessary, I don't think it should be closed

[joshua-vaughn]

@joshblack please reopen this

[sharonlymer]

@joshblack I agree. This is essential capability. The lack of contributions to date does not negate the requirement. Please re-open this issue.

[eddybrando]

I'd also like to put myself on the list of people looking for this feature.

You could take a look at https://react-bootstrap.github.io/components/table/#table-responsive-always for a similar React implementation with Bootstrap or at https://bootstrap-vue.org/docs/components/table#tables for a Vue.js example.

This could also be a good starting point:

display: block;
overflow-x: auto;
white-space: nowrap;

[andrea-gm]

What is the status of this issue @joshblack?

Several designers from multiple teams in CD&AI have requirements for horizontal scroll. Most have worked in silo, but we need a consistent pattern and implementation across the board.

These are a couple options that have been explored for how to ensure the table row actions are always visible when the table has horizontal scroll. Of these options, the one with actions pinned next to the first column has gathered more positive feedback.

We must also consider how to indicate to the user that the table is scrollable. Some folks are using gradients for this, but there are conflicting opinions about this visually.

[dakahn]

Thanks for your patience, all. We're down to have this contributed, but there are some caveats:

• We need IE11 support, which has been a technical blocker for us on this feature in past discussions
• Clear keyboard interaction patterns. Keyboard focus on table headers in a scrolling/overflowing table will be a tough problem to solve for sure. Our existing overflow implementation leaves something to be desired here and this would potentially exacerbate those frustrations
• Its also unclear to us how exactly that drop shadow would work/be implemented