DataTable with expansion does not work with sticky header

[gmoehler]

Brief description

DataTables with expansion are not yet supported very well with sticky header. The pulldown is somewhat mis-aligned with the rest of the row.

What package(s) are you using?

latest

• [x] carbon-components
• [x] carbon-components-react

Detailed description

Describe in detail the issue you're having. When using the appropriate styles in Vanilla JS or the new stickyHeader flag in the react component (https://github.com/carbon-design-system/carbon/issues/3875) along with expansion the row does not look properly (see screenshot)

Is this issue related to a specific component? DataTable

What did you expect to happen? What happened instead? What would you like to see changed? row should look the same with or without sticky header

What browser are you working in? chrome / firefox

What version of the Carbon Design System are you using? latest

What offering/product do you work on? Any pressing ship or release dates we should be aware of? IBM Cloud SQL Query

Steps to reproduce the issue

1. Select DataTable with expansion in storyboard
2. In Knows turn on the sticky header option
3. The table rows are no longer showing up properly

Additional information

• Screenshots

[tw15egan]

Seems to still be an issue

[sstrubberg]

Is this relevant @gmoehler ?

[gmoehler]

@sstrubberg sorry for the late response. in fact we have been using a sticky table unchanged since that time in the product, and had to add a number of css styles to make it working. Unfortunatelly, the current carbon 10 react storybook no longer has the option to set parameters via knobs, so it is hard to easily prove its current state. So I assume it is still relevant.

[tyranasaurus]

This is still an issue.

[tay1orjones]

Yeah, here's an example of it in the current storybook

[tay1orjones]

@gmoehler could you share some of the overrides you've made to get this working? Would love to get those fixes upstream here if possible!