Introducing the new Table, Data Grid components ✨

I am unable to copy/paste the tables from the old version.

I’m copying and pasting within the same project, but different pages.

Cut and paste doesn’t work, copy and paste doesn’t work.

(I’m keeping the old version to ensure better viewing on mobile devices, as the old layout on smaller screens is still superior.)

1 Like

The new table component’s in-app filter does not work when it is connected to an “array” column. After connecting the filter to an array column, the filter simply does not work (nothing happens when clicked, it does not even open the filter window). I keep the old version of the table here and the array filter works in it.

EDIT: Resolved July 5th

Is there a way to set the width of the new table to match the width of the app (without using CSS)? By “width of the app” I mean from the App title in the upper left to the user profile in the upper right (using Top layout). This is how the old table worked.

Right now I have to scroll the table to the right to get to the item actions, regardless of how few columns there are or how narrow, or whether they are set to fixed or auto.

Also, when using Group by with the old table the groupings had white space in the right places so the heading and grouped items actually looked like groups. New table groupings run together.

1 Like

I had seen those posts and was looking to limit the table component to the width of the app, not extend it. Should I infer from your links that there isn’t a native solution?

If CSS is the only way, could anyone post the code that would make the default table width behave like the old one?

I don’t mess around with CSS much, but I think I remember seeing mention of placing the table in a container, and then apply the CSS. If I’m understanding correctly the container would have the proper width and the width of the table would fill the container. Again, this is not something I mess around with, so I’m just guessing.

.new-table-adjusted div[class*="new-table-lib___StyledDiv-sc"] {
margin-right: 0;
}

With new-table-adjusted being the class name of your table component.

3 Likes

I’m using Grouping in that table, and when the group text happens to be long, I’m still having to scroll to the right of the table to get to the actions. Not sure if the grouping or my use of CSS is the issue (this is my first attempt at using CSS).

Have you tried having the size of your columns fixed? I find it odd a group’s name can get that long.

Grouping is the main factor - fixed columns don’t help if the group is long.

The long group name does actually make sense in this use case, but I can do a workaround for the overly long ones.

Thanks for your help with this.

Is there a way to have a Table component set to a SQL view but allow the Choice field (column) to set a value in an actual table with a related field? We do this quite a bit with other components and form, but doesn’t look like the Related field will show up. If there are other options here, I would be open for feedback.

Can you explain what is the Choice field here? Is it positioned inside the same SQL Table? How are you setting it up with other components and form?