Datagrid Storybook warnings: invalid DOM nesting

[paul-balchin-ibm]

What package(s) are you using?

• Carbon for IBM Products (or Carbon for IBM Cloud & Cognitive)

Detailed description

Describe in detail the issue you're having.

When running Storybook locally, I see console warnings across many stories.

This is not necessarily a comprehensive list. E.g.:

http://localhost:3000/?path=/story/ibm-products-components-datagrid-datagrid-canary--infinite-scroll

Warning: validateDOMNesting(...): <thead> cannot appear as a child of <div>.

Warning: validateDOMNesting(...): <div> cannot appear as a child of <table>.

Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>.

Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>.

http://localhost:3000/?path=/story/ibm-products-components-datagrid-datagrid-canary--selectable-row

Warning: validateDOMNesting(...): <th> cannot appear as a child of <div>.

Warning: validateDOMNesting(...): <div> cannot appear as a child of <tr>.

Is this issue related to a specific component?

Yes, these all appear across multiple stories for the Datagrid

What did you expect to happen? What happened instead? What would you like to see changed?

We should not see these console warnings at all.

What browser are you working in?

Chrome, latest.

What version of the @carbon/ibm-products (or @carbon/ibm-cloud-cognitive) package are you using?

v2.11

Steps to reproduce the issue

1. Fork and clone @carbon/ibm-products to your local machine.
2. yarn to install packages.
3. yarn storybook to run Storybook.
4. Open the browser to each of the URLs listed above.
5. Open the browser's dev tools.
6. Select the "Console" tab to view the console warnings.

[matthewgallo]

Fixed one instance of invalid DOM nesting with expandable rows, thinking we can take a similar approach with other instances. Essentially, any direct child of a tr is required to either be a td or th element. Then any other elements required can be inside of either the td or th.

[devadula-nandan]

a few got fixed with this #5716

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