Migrating from ui-components Table to Paste's Datagrid

[andrewlehmann]

Hello all,

I'm currently migrating a page to use Datagrid instead of our old Table, but I have one sticking point. In our previous solution, resizing the table would result in the columns themselves resizing, so that the entire table could still be viewed on smaller screens.
However, with the new Datagrid, it seems that the default behavior for the same scenario is to scroll horizontally instead of shrink the column width. This isn't desirable for our product, because it can add several clicks and some scrolling to be able to accomplish the same result that was not previously necessary.

Is it possible to get this behavior with Paste today? If not, are there any plans to support this?

Before (Without Paste):

After (With Paste):

CC: @apombo-ux

[gloriliale]

Thanks for posting, @andrewlehmann! Was chatting about this w/ the team and have some ideas on this. Organizing them now to give a complete answer.

[gloriliale]

Hi @andrewlehmann! Thanks for talking w/ us about this in Office Hours! Here's the recording in case you'd like to revisit any of our conversations. The password is posted in the #help-design-system channel.

We also linked out this (now a little more cleaned up) codesandbox showing the behaviors of table and datagrid. Right now, DataGrid has overflowx=auto by default, but we're considering making this optional, as well as making the 100% default width of Table optional. The last example, using tableLayout and Truncate, is the one that might serve you best for what you're looking for right now. I'd also make sure to consider the design option @katieporter suggested of an actions menu.

Thanks again and keep the questions coming!