DataGrid table does not have a sticky header

[marinamas]

Package

Carbon for IBM Products

Description

DataGrid Table should have a sticky header by default

Component(s) impacted

Datagrid

Browser

Chrome, Safari, Firefox, Microsoft Edge

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

"@carbon/ibm-products": "2.40.0",

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Product/offering

Infrastructure

CodeSandbox or Stackblitz example

https://codesandbox.io/p/sandbox/brave-poincare-2ffcfr?file=%2Fpackage.json%3A56%2C2

Steps to reproduce the issue (if applicable)

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

[marinamas]

Any timeline for this bug fix

[elycheea]

@marinamas We are considering stickyHeader an enhancement since this was not a part of our original requirements.

I don’t believe we’d change this default behavior, but we can re-evaluate its priority with our design team for consideration since the Carbon DataTable does include an experimental stickyHeader.

[kglickman]

The Carbon stickyHeader has side-effects on the column widths and table width that are undesireable.

[ljcarot]

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.