[New plugin] Fully Customizable Table / Grid

Awesome, thank you very much @Thimo!!


Hi @Thimo, I added a Data Type with a link to another onw and it doesn’t seem like it can load. I ugraded to the latest and created this new test table. Thanks!

@bubble35 How did you setup the table? There is an example how to use lined fields on the demo page (column 4), please take a look at it and let me know if you have the same setup: Pluginpreview | Bubble Editor

1 Like

Hi @Thimo ! Question about headers.

  1. Is there a way to have the header name wrap or set the minimum column width to the header width text?

Hi @josh10 just pushed an update (2.60.0) that adds the feature to warp long header texts to a new line (automatically setting the min width per column is not supported by the library):

1 Like

@emmanuel I’m going to need you to have your team drop everything add add the ability for me to send a digital hug to users who are top tier plugin creators.

@Thimo Thank you for this awesome change!

3 Likes

It’s almost perfect on the width side. Just one detail. It doesn’t want to wrap if one long word. For example ‘Version’ with a 3 digit expected table entry will not wrap. However, ‘Version #’ will wrap.

@josh10 Fixed in 2.60.1 :slight_smile:

1 Like

Hey @Thimo! Thanks for building this.

Question 1
I’m noticing it’s taking 5-10 seconds from page load for the table to load. If I’m loading page for the first time

It’s sometimes got a loading with a skeleton UI / pulsing animation - presumably for data changes/refresh

Wondering if that loading UI can show up from page load, or if there are any tips for improving loading time?

Question 2
In my previous design, I had a RG with this top bar with search box and a “new item” button.

Where would you suggest I put that new item button now? I’ll obviously delete the search box.

Hi @kai! Loading times are fully dependent on how fast you can load your data. The table will render instantly when your data is loaded. Not sure how you are getting your dat, but if you can make improvements there it would make the table load fast! Side node, the had an ‘is loaded’ state you can use to know when the table is loaded (you can use that state to display a loading spinner for example)

You can keep this button in the same place but give it a negative bottom margin so it overlaps with the table and is next to the search box of the table. But this is just an idea, I am sure there are a lot more ways for this UI :slight_smile:

@kai I’m only a few months with bubble but it has seemed to me that every bubble page loads slightly slower the first visit after a change that affects it. I’m assuming that whatever compilation of a bubble page happens to present it to a browser is done just in time and then cached until it changes again. I’ve seen this with other web app systems as well.

I can also confirm that whatever goes on during that process does seem to take far longer for pages that include this plugin. My assumption is that the more complex a plugin or page component is, the longer that first-time compilation takes.

My intended solution is to set up some sort of automatic smoke test that can visit every page after a deploy to ensure that they aren’t broken and to take care of the first time visit.

1 Like

Hi @Thimo - Thanks for the plugin. While we are trying to add more than one columns dynamically using ‘Add a column’ action in workflow, the table reflects only one column addition. However, if we introduce a pause between those 2 actions, it seems to work.

Am I missing something or is there any other better way to adding multiple columns (w/o adding pause) to the table using workflows? We are working to build a templatized table creation for an app and there could be 5-10 or more new columns added dynamically and we would like to have this plugin do it in a consistent manner. Appreciate any suggestions/help you can provide.

@partha Not sure what your current setup is, but could you send me a PM with some more details about your setup (maybe an editor link)? That way I can see if I can improve this behaviour :slight_smile:

I would love the ‘sort’ thing in the ‘checkbox’ column to be a different feature:

  • a checkbox itself where:
    – if all are selected, it is selected
    – if none are selected it is not selected
    – if some are selected, it’s a horizontal line
1 Like

We had this issue at first, but it resolved itself and we no longer need the pause when using the plugin. The trick is to show all the data you think you need to when loading the initial table. This includes the key source data.

@jacob.b.singer Thank you for the feature request. I am not sure on the achievability, but I will put it on my list to explore possibilities!

@josh10 small tip, you can also use the ‘re-render’ workflow action after you appended the columns to fix this issue (:

1 Like

@jacob.b.singer do you mean a “select all” checkbox in the header? If so, I agree- would love to see that as well.

Precisely @sydney22 and @Thimo ! Here is a design example:

2 Likes

It’s a good tip and I appreciate you dropping it for me.

Love it man. That would be an epic design upgrade for @Thimo . He is one of the few developers that really listens to the community.

1 Like