search

carbon-design-system / ibm-products

A Carbon-powered React component library for IBM Products
https://ibm-products.carbondesignsystem.com
Apache License 2.0
98 stars 138 forks source link

Datagrid: can't scroll headers #5948

Closed wkeese closed 1 month ago

wkeese commented 3 months ago

Package

Carbon for IBM Products

Description

QA filed a ticket against our product that you can't scroll a table horizontally from the header... i.e. there's no effect when you move the cursor over the header columns, and then move two fingers on the trackpad (or similar action on mobile devices).

From a user's standpoint, I can understand the complaint.

From a development standpoint, I can see neither useFloatingScroll() nore DatagridVirtualBody have any code to support this. They only have code to:

// Sync the scrollLeft position of the virtual body to the table header

I.E. Code to monitor the scrollLeft position of the <tbody> and copy it to the <thead>. There's no code to allow manually scrolling the <thead> nor to copy scroll position from the <thead> to the <tbody>.

I think to support it you would need to set overflow-x:auto on the <thead>, but then use the tricks listed in https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll to hide the scrollbar.

Component(s) impacted

Datagrid

Browser

Chrome

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

2.46.0

Suggested Severity

None

Product/offering

IKC

CodeSandbox or Stackblitz example

https://ibm-products.carbondesignsystem.com/?path=/story/ibm-products-components-datagrid--infinite-scroll&globals=viewport:basic

Steps to reproduce the issue (if applicable)

It's hard to give a test case for this problem due to all the other bugs.

The test case listed above uses the withVirtualScroll flag, but the horizontal scrolling is broken in other ways: notice how you can't see the vertical scrollbar until you scroll all the way to the right.

I also made a test case for useFloatingScroll(), but it has multiple other problems that need to be fixed first before you can see the problem listed in this ticket.

Release date (if applicable)

No response

Code of Conduct

elycheea commented 3 months ago

@wkeese Trying to confirm these issues, but it seems like these might be two separate issues.

  1. With infinite scrolling, we’re unable to scroll horizontal until you scroll over the table body.
  2. With virtualized scrolling, the vertical scrollbar is not visible.
wkeese commented 3 months ago

Well I think there are lots of issues in this area, that's why I filed #5941. That needs to be fixed before you can look at the virtualized scrolling.