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:
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)
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.
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.
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!
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.
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.
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/ (for Wordpress) who handle this pretty greatly.
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?
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?
. . . 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.
