# Datagrid versus table best practices **URL:** \ **Category:** Ask us anything\ **Created:** [November 7, 2023, 10:43pm UTC](https://community.weweb.io/t/datagrid-versus-table-best-practices/5278 "2023-11-07T22:43:22Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![Jack](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jack/32/5915_2.png) [@Jack](https://community.weweb.io/u/Jack)\ **Post date:** [November 7, 2023, 10:43pm UTC](https://community.weweb.io/t/datagrid-versus-table-best-practices/5278/1 "2023-11-07T22:43:22Z")
Any thoughts from others about when to use a datagrid versus the table element? I’ve been pleasantly surprised with the datagrid element but it seems to have its drawbacks: 1. You can’t bind the text and reformat on the front-end (e.g. to format dates in the local user’s timezone, you need to format on the backend before sending) 2. The default scroll bars are a bit weird and require some custom CSS to look right Would love to hear about other drawbacks (e.g. sorting, filtering, etc.) if there are any. Jack ---
**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:** [November 7, 2023, 10:45pm UTC](https://community.weweb.io/t/datagrid-versus-table-best-practices/5278/2 "2023-11-07T22:45:30Z")
I usually prefer my own table like structures with divs, more flexibility. I usually spend more time fighting datagrid, than doing other stuff. It’s just my personal preference though. ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [November 7, 2023, 11:24pm UTC](https://community.weweb.io/t/datagrid-versus-table-best-practices/5278/3 "2023-11-07T23:24:07Z")
Hi @Jack 👋 I would say the datagrid element is great if you want something that looks nice and works well out of the box. It’s super helpful to get started quickly with inline editing and multiple selection in particular. That said, like @Broberto I find that I often need to build my own table with more flexibility / customization options. FYI, providing more ready-made table elements with nice built-in options (like the sort) is something we discussed with @flo, our CPO, no later than today. We’re waiting for the release of components to work on making more available by default so hopefully you can get the best of both worlds soon! 🙂 ---
**Author:** ![Jack](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jack/32/5915_2.png) [@Jack](https://community.weweb.io/u/Jack)\ **Post date:** [November 8, 2023, 12:03am UTC](https://community.weweb.io/t/datagrid-versus-table-best-practices/5278/4 "2023-11-08T00:03:24Z")
Makes sense. Thanks @Broberto and @Joyce. In terms of inline editing within the table element, do you just put a transparent, prepopulated input in a cell and then save any changes ‘on change’ or ‘on enter’? Another approach could be to have a small pencil icon next to a text field and then toggle the inputs display on pencil icon click for the inline editing. Jack ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [November 8, 2023, 12:05am UTC](https://community.weweb.io/t/datagrid-versus-table-best-practices/5278/5 "2023-11-08T00:05:26Z")
Yep, both approaches will work 🙂 ---
**Author:** ![kenboer](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kenboer/32/2491_2.png) [@kenboer](https://community.weweb.io/u/kenboer)\ **Post date:** [November 16, 2023, 10:05pm UTC](https://community.weweb.io/t/datagrid-versus-table-best-practices/5278/6 "2023-11-16T22:05:02Z")
Assuming you had the same elements in the datagrid and a virtually identical table, is there any reason that one might be more performant? I wasn’t sure if the datagrid was essentially creating a table, or if it was constructed differently and thus performed differently. ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [November 18, 2023, 11:14am UTC](https://community.weweb.io/t/datagrid-versus-table-best-practices/5278/7 "2023-11-18T11:14:47Z")
Mmm gut feeling says the datagrid may be slightly “heavier” to render than a regular table but truth is I don’t know! 😆 What do you think @aurelie? Can the way the datagrid is constructed affect performances? ---
**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:** [November 18, 2023, 2:41pm UTC](https://community.weweb.io/t/datagrid-versus-table-best-practices/5278/8 "2023-11-18T14:41:50Z")
I don’t think it affects performance heavily. It’s more a comparison of how it affects (generates) the DOM (Document Object Model) elements tree, and it’s size. I think Datagrid is more complex, **but** , it’s nothing crazy. Of course your simple table is simpler, but yeah, gotta weigh the cons and pros, and the overall context. I prefer building all of my stuff with divs, so I have 200% control over the thing and I don’t hit a wall after getting quite deep in the element. I’d like to see in the next year or so, less DOM clutter being created for stuff like simple divs etc. Especially with nocode, where people very often are inexperienced with the practices, adding wrappers and additional divs for each div can cause bloated DOM. (I’ve had two tickets already about this causing problems) It’s not that bad, but could be better. A bloated DOM is a plague of the builders, understandable. But I also saw some builders like [https://bricksbuilder.io/](https://bricksbuilder.io/) (for Wordpress) who handle this pretty greatly. ![empty div](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/2ef733053e378f42a0a8fca39b0ca6505db80b49.png) ---
**Author:** ![Philip1](https://avatars.discourse-cdn.com/v4/letter/p/b5ac83/32.png) [@Philip1](https://community.weweb.io/u/Philip1)\ **Post date:** [January 26, 2024, 11:18am UTC](https://community.weweb.io/t/datagrid-versus-table-best-practices/5278/9 "2024-01-26T11:18:55Z")
Hi Jack, I have a table element with a text input cell. But when I am trying to set ‘save on enter’ in workflows, I cannot find the data. Any idea what I am doing wrong? Philip \*\* [Found it!](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138/6) ---
**Author:** ![benFortunato](https://avatars.discourse-cdn.com/v4/letter/b/6de8d8/32.png) [@benFortunato](https://community.weweb.io/u/benFortunato)\ **Post date:** [February 26, 2024, 4:46pm UTC](https://community.weweb.io/t/datagrid-versus-table-best-practices/5278/10 "2024-02-26T16:46:16Z")
How do you get all the functionality like inline editing and multi-select? Seems like it would be better to have this functionality handled by a component rather than a large number of workflows? ---
**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:** [February 26, 2024, 5:57pm UTC](https://community.weweb.io/t/datagrid-versus-table-best-practices/5278/11 "2024-02-26T17:57:40Z")
I created a reusable component with multiselect and all the other stuff, you just plug the data and it works ---
**Author:** ![benFortunato](https://avatars.discourse-cdn.com/v4/letter/b/6de8d8/32.png) [@benFortunato](https://community.weweb.io/u/benFortunato)\ **Post date:** [February 26, 2024, 6:43pm UTC](https://community.weweb.io/t/datagrid-versus-table-best-practices/5278/12 "2024-02-26T18:43:54Z")
. . . and inline editing? Although I guess the datagrid component doesn’t have true inline editing, just row editing. I would consider inline editing the ability to click the cell and then edit the text in the cell directly without having to press an edit button. ---
**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:** [February 26, 2024, 6:49pm UTC](https://community.weweb.io/t/datagrid-versus-table-best-practices/5278/13 "2024-02-26T18:49:37Z")
No problems, you can do that. I have a dashboard that does that for some parts. It’s actually a very trivial workflow on change. ---
**Author:** ![tomerer2000](https://avatars.discourse-cdn.com/v4/letter/t/9d8465/32.png) [@tomerer2000](https://community.weweb.io/u/tomerer2000)\ **Post date:** [April 15, 2025, 5:16pm UTC](https://community.weweb.io/t/datagrid-versus-table-best-practices/5278/14 "2025-04-15T17:16:18Z")
Kinda an old subject, but I just participated in WeWeb office hours, and when using hundreds of rows, it’s definitely better to work with **DataGrid** , as the frontend only loads the **visible** rows, while the **Table** loads **all** of the rows ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [April 15, 2025, 6:35pm UTC](https://community.weweb.io/t/datagrid-versus-table-best-practices/5278/15 "2025-04-15T18:35:40Z")
100%