Datagrid sitcky, infinite scroll issues

crichtonibm commented 1 month ago

Package

Carbon for IBM Products

Description

Infinite scrolling has some column sizing and sticky left operational issues.

When in Infinite mode, scrolling to the right you will notice that letters passing by the selection checkbox are visible
When in Infinite mode, when scrolling to the right, at some point the sticky left column decides to no longer be sticky (resize the window to have only 5 cols showing)
When in Infinite mode, the final column is not honoring the specified column width
Using either mode, if the scrolling area is small enough, the left sticky column is no longer sticky. Is that a Feature or a Bug?
When in Infinite mode, I was not able to reproduce here, but in my more complex usage, the right sticky actions overflow also 'moved' left at the very end of the scroll to the right

Component(s) impacted

Datagrid

Browser

Chrome

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

2.51.0

Suggested Severity

Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.

Product/offering

Analytics and Business Intelligence

CodeSandbox or Stackblitz example

https://stackblitz.com/edit/github-kpy2kh?file=src%2FExample%2FExample.jsx

Steps to reproduce the issue (if applicable)

Documented in the testcase screen

Release date (if applicable)

No response

Code of Conduct

[x] I agree to follow this project's Code of Conduct
[x] I checked the current issues for duplicate issues

devadula-nandan commented 1 month ago

Hi @crichtonibm,

Point 4 is actually a feature, especially on small screens. If there is a sticky column that is wide enough, the user might have very little or even no real estate to view the other columns.

As for the other points, we have a PR (https://github.com/carbon-design-system/ibm-products/pull/6135) that should address some of these issues. The release candidate (RC) will likely be available today. We plan to investigate and resolve any remaining issues once we update to the latest RC in StackBlitz and identify which issues still persist.

ljcarot commented 16 hours ago

We've been investigating TanStack Table, a third-party, open-source offering, which provides extensive data table capabilities surpassing what our Carbon Datagrid offers. It provides much more flexibility and customization. TanStack Table is headless which means it can easily be added alongside Datagrid component in your product or application. The benefits of more flexibility for product teams and less maintenance for Carbon makes it a win win. Lastly, it is available in multiple frameworks including React and Web Component so it provides an option to non-React product teams.

For these reasons, we have decided to transition from building our own custom table component to using an example-based approach with TanStack Table. Datagrid will still exist in our library for existing teams but we are announcing the deprecation* of the Datagrid component in v2.54.0 release so teams can begin to work through the transition. Details about how to use both Datagrid and TanStack together can be found here.

*Deprecation means that no new features will be added however sev 1 and sev 2 bugs will be supported.

carbon-design-system / ibm-products