# Introducing the new Table, Data Grid components ✨ **URL:** \ **Category:** General\ **Tags:** layout, community-update, components\ **Created:** [May 8, 2024, 3:08pm UTC](https://community.glideapps.com/t/introducing-the-new-table-data-grid-components/73197 "2024-05-08T15:08:13Z")\ **Posts on this page:** 14\ **Page:** 3
**Author:** ![aledesousa](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aledesousa/32/229_2.png) [@aledesousa](https://community.glideapps.com/u/aledesousa)\ **Post date:** [June 11, 2024, 1:33pm UTC](https://community.glideapps.com/t/introducing-the-new-table-data-grid-components/73197/42 "2024-06-11T13:33:31Z")
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.) ---
**Author:** ![aledesousa](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aledesousa/32/229_2.png) [@aledesousa](https://community.glideapps.com/u/aledesousa)\ **Post date:** [June 22, 2024, 4:58pm UTC](https://community.glideapps.com/t/introducing-the-new-table-data-grid-components/73197/43 "2024-06-22T16:58:07Z")
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 ---
**Author:** ![HeartwoodTreeCo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/heartwoodtreeco/32/8150_2.png) [@HeartwoodTreeCo](https://community.glideapps.com/u/HeartwoodTreeCo)\ **Post date:** [July 26, 2024, 6:11pm UTC](https://community.glideapps.com/t/introducing-the-new-table-data-grid-components/73197/44 "2024-07-26T18:11:14Z")
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. ---
**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\ **Post date:** [July 26, 2024, 7:16pm UTC](https://community.glideapps.com/t/introducing-the-new-table-data-grid-components/73197/45 "2024-07-26T19:16:43Z")
> [@Full screen in Desktop](https://community.glideapps.com/t/full-screen-in-desktop/75014): > > Viewing containers/tables in full screen doesn’t cover the entire screen. Alot of dead space on the left and right. Would be great if the layout to extend to the whole full screen. > [@Full width Desktop - Containers](https://community.glideapps.com/t/full-width-desktop-containers/68194): > > Hi Anyone know CSS to make containers “full width” (95vw)? I can make the whole window 95vw with this: But containers stay the standard Glide ~1200px wide. //Danny ---
**Author:** ![HeartwoodTreeCo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/heartwoodtreeco/32/8150_2.png) [@HeartwoodTreeCo](https://community.glideapps.com/u/HeartwoodTreeCo)\ **Post date:** [July 26, 2024, 7:35pm UTC](https://community.glideapps.com/t/introducing-the-new-table-data-grid-components/73197/46 "2024-07-26T19:35:47Z")
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? ---
**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\ **Post date:** [July 26, 2024, 9:36pm UTC](https://community.glideapps.com/t/introducing-the-new-table-data-grid-components/73197/47 "2024-07-26T21:36:56Z")
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. ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [July 27, 2024, 1:12am UTC](https://community.glideapps.com/t/introducing-the-new-table-data-grid-components/73197/48 "2024-07-27T01:12:22Z")
![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/e/be24963333eb4cebd13478f35227a2285090d46e.png) ```auto .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. ---
**Author:** ![HeartwoodTreeCo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/heartwoodtreeco/32/8150_2.png) [@HeartwoodTreeCo](https://community.glideapps.com/u/HeartwoodTreeCo)\ **Post date:** [August 6, 2024, 4:29pm UTC](https://community.glideapps.com/t/introducing-the-new-table-data-grid-components/73197/49 "2024-08-06T16:29:48Z")
> [@ThinhDinh](#): > > ```auto > .new-table-adjusted div[class*="new-table-lib___StyledDiv-sc"] { > margin-right: 0; > } > > ``` 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). ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [August 6, 2024, 11:45pm UTC](https://community.glideapps.com/t/introducing-the-new-table-data-grid-components/73197/50 "2024-08-06T23:45:23Z")
Have you tried having the size of your columns fixed? I find it odd a group’s name can get that long. ---
**Author:** ![HeartwoodTreeCo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/heartwoodtreeco/32/8150_2.png) [@HeartwoodTreeCo](https://community.glideapps.com/u/HeartwoodTreeCo)\ **Post date:** [August 7, 2024, 12:36am UTC](https://community.glideapps.com/t/introducing-the-new-table-data-grid-components/73197/51 "2024-08-07T00:36:40Z")
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. ---
**Author:** ![Sean\_Page](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sean_page/32/77424_2.png) [@Sean\_Page](https://community.glideapps.com/u/Sean_Page)\ **Post date:** [October 30, 2024, 5:57pm UTC](https://community.glideapps.com/t/introducing-the-new-table-data-grid-components/73197/53 "2024-10-30T17:57:56Z")
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. ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [October 31, 2024, 12:17am UTC](https://community.glideapps.com/t/introducing-the-new-table-data-grid-components/73197/54 "2024-10-31T00:17:50Z")
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? ---
**Author:** ![Sean\_Page](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sean_page/32/77424_2.png) [@Sean\_Page](https://community.glideapps.com/u/Sean_Page)\ **Post date:** [November 12, 2024, 3:44pm UTC](https://community.glideapps.com/t/introducing-the-new-table-data-grid-components/73197/55 "2024-11-12T15:44:50Z")
Current approach with a normal collection (Card or List) 1. Collection on a Screen that is derived from an SQL view 2. Set up the “Add Form” option to use a relational table with the view. 3. Choice component on this form allows me to pick from another selection and assign the ID in the Table, refresh view, and now I have my new data on the screen. Now, we would like to use a table because of Tags, but when the data source of the Table is a View, the Fields / Columns cannot be tags because the source is read only. It would be great to assign a field to the Tag to another source like you can the Choice component to update values in the related table. ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [November 13, 2024, 12:09am UTC](https://community.glideapps.com/t/introducing-the-new-table-data-grid-components/73197/56 "2024-11-13T00:09:32Z")
> [@Sean\_Page](#): > > Collection on a Screen that is derived from an SQL view I don’t have experience using SQL in Glide, by SQL view, do you mean a table that you queried from your SQL source? > [@Sean\_Page](#): > > Set up the “Add Form” option to use a relational table with the view. Can you explain why do you need an “Add Form” to use a relational table? Isn’t add form for adding rows? > [@Sean\_Page](#): > > Choice component on this form allows me to pick from another selection and assign the ID in the Table, refresh view, and now I have my new data on the screen. So changing the ID refreshes your query or is it something else? [Previous page](https://community.glideapps.com/t/introducing-the-new-table-data-grid-components/73197.md?page=2)