Table horizontal scroll

vsnichols commented 5 years ago

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.)

resize viewport

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

emyarod commented 4 years ago

@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 commented 4 years ago

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

joshua-vaughn commented 4 years ago

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

joshua-vaughn commented 4 years ago

@joshblack please reopen this

sharonlymer commented 4 years ago

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

eddybrando commented 4 years ago

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-island commented 4 years ago

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 commented 4 years ago

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

number-00 commented 3 years ago

Hello, can anyone help me with adding position: sticky to first 2 column for carbon datable, it doesn't have to support IE. https://codesandbox.io/s/clever-resonance-gnmbi?file=/index.js

saemideluxe commented 2 years ago

Would love to have this features too.

sstrubberg commented 1 year ago

@elycheea is going to hook us up with a link!

tay1orjones commented 1 year ago

This has been closed for some time, but I want to mention that this feature is available in the @carbon/ibm-products library.

It's a companion library supported by a subset of teams within IBM and has an advanced "DataGrid" built atop the DataTable with this functionality (plus a lot more) demo here.

The DataGrid workstream specifically is supported by an internal working group. Issues and future plans can be found on the ibm-products repository

carbon-design-system / carbon