Allow datagrid column headers to wrap

[elycheea]

Originally posted in #1923 Designer: @johannasuarez-koval

Desired behavior

• [ ] When title is too long, wrap the text to two lines and then truncate the rest of the text
  • [ ] Full text should be shown in a tooltip on hover
• [ ] When using compact (xs??) data tables, the title or content inside the cells will truncate and not wrap onto two lines.

To investigate

• [ ] Ensure that keyboard users are able to see the full column title even if truncated

[elycheea]

Adding this as a related issue we should look into with datagrid column headers.

Column headers are not reachable with keyboard, there's no way for keyboard users to see the full text of the truncated column headers.

Originally posted by @thefirstartist in https://github.com/carbon-design-system/ibm-products/issues/3506#issuecomment-1740061765

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