# New Table Element

**URL:** <https://community.weweb.io/t/new-table-element/9758>\
**Category:** How do I?\
**Created:** [July 16, 2024, 7:33pm UTC](https://community.weweb.io/t/new-table-element/9758 "2024-07-16T19:33:11Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![fredo22](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fredo22/32/2283_2.png) [@fredo22](https://community.weweb.io/u/fredo22)\
**Post date:** [July 16, 2024, 7:33pm UTC](https://community.weweb.io/t/new-table-element/9758/1 "2024-07-16T19:33:11Z")

</div>

Can someone post a link to the new table element in weweb documentation? The documentation is terrible. The left Nav “Elements” section doesn’t include Table. Seach function on documentation site doesn’t yield results. @Joyce ? Have you made a video on the new table element?

BTW, it appears that we no longer get an option of whether or not to use sample data or not???

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [July 16, 2024, 8:05pm UTC](https://community.weweb.io/t/new-table-element/9758/2 "2024-07-16T20:05:57Z")

</div>

Are you talking about table or data grid? There’s quite a difference in two. Table is used for hard-coded data or more advanced data display. Data grid is used to quickly setup a table from a collection

---

<div class="post-metadata">

**Author:** ![fredo22](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fredo22/32/2283_2.png) [@fredo22](https://community.weweb.io/u/fredo22)\
**Post date:** [July 16, 2024, 10:32pm UTC](https://community.weweb.io/t/new-table-element/9758/3 "2024-07-16T22:32:41Z")

</div>

Thanks Luka. I was referring to the newly updated table element. My understanding was that revamped element gets rid of the columns section and uses flexbox of type Grid instead.

---

<div class="post-metadata">

**Author:** ![fredo22](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fredo22/32/2283_2.png) [@fredo22](https://community.weweb.io/u/fredo22)\
**Post date:** [July 17, 2024, 1:16am UTC](https://community.weweb.io/t/new-table-element/9758/4 "2024-07-17T01:16:34Z")

</div>

Hey @luka I added the new table element to a page and was able to bind to a collection. Only thing is, it is not responsive on mobile size. The column width default is 1fr. I expect that when viewed on mobile, those columns will shrink so that the table takes up the full width of the mobile width. Currently only 1 column is visible on mobile, and columns are not shrinking. Perhaps I don’t understand what fr means or how that responds at different sizes. I made a short Loom video to illustrate my issue. Can you see if I’ve done something wrong? [Troubleshooting Collection List Layout Issue | Loom](https://www.loom.com/share/42e915ad55294100bbdf3ddef40e07ef?sid=37098c66-0a27-4541-93e0-6bc8f8a684dc)

---

<div class="post-metadata">

**Author:** ![Micah](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/micah/32/9102_2.png) [@Micah](https://community.weweb.io/u/Micah)\
**Post date:** [July 17, 2024, 2:03am UTC](https://community.weweb.io/t/new-table-element/9758/5 "2024-07-17T02:03:43Z")

</div>

Looks like you have a different mobile width setting on your ‘Collection List’.

---

<div class="post-metadata">

**Author:** ![fredo22](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fredo22/32/2283_2.png) [@fredo22](https://community.weweb.io/u/fredo22)\
**Post date:** [July 17, 2024, 8:02pm UTC](https://community.weweb.io/t/new-table-element/9758/6 "2024-07-17T20:02:26Z")

</div>

LOL. It was a typo. I have the mobile width set to 1200 😉

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [July 18, 2024, 8:11am UTC](https://community.weweb.io/t/new-table-element/9758/7 "2024-07-18T08:11:14Z")

</div>

1fr is one part of whole, for example if you have two 1fr’s, they both take 50% of available space.

If you want your table to fit on mobile, you can keep the fr’s, but update the table size. If you want to have a specific width for columns, you can change to pixels instead of frs.

Check [this](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) out for more on grid sizing.

---

<div class="post-metadata">

**Author:** ![fredo22](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fredo22/32/2283_2.png) [@fredo22](https://community.weweb.io/u/fredo22)\
**Post date:** [July 18, 2024, 9:20pm UTC](https://community.weweb.io/t/new-table-element/9758/8 "2024-07-18T21:20:05Z")

</div>

thanks Luka

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [July 18, 2024, 10:31pm UTC](https://community.weweb.io/t/new-table-element/9758/9 "2024-07-18T22:31:50Z")

</div>

btw. 1 fr is simply 1 fraction
