[New plugin] Fully Customizable Table / Grid

[sydney22]

@janiece.lincoln setting a custom loading state may be helpful in this case similar to my question a few posts above. Would be a valuable add to the demo page since I think this is a fairly common experience.

@Thimo

@sydney22 It depends a bit on how you are setting the data source. If you are setting a state, you could before setting the state set a custom ‘loading’ state to ‘yes’, then set the states for the table data, and after that set the custom ‘loading’ state to ‘no’. Depending on the value of the custom loading state you can show a loader in your app

[janiece.lincoln]

I see now. Thanks! It was a dropdown option set that wasn’t working. Just so I understand, how should I treat option sets? I am not sure I understand how I should convert them to text in the given element settings interface.

[Thimo]

@janiece.lincoln

Just so I understand, how should I treat option sets?

Please take a look at the demo page, you can see all kinds of examples including option sets → Column 7 Pluginpreview | Bubble Editor

[janiece.lincoln]

I missed that! Thanks. Overall, I love the plugin. There are a few things that remain challenging:

1. Default sort order. I notice that when my users add new values to the table, they’re appearing at the end of the list. This makes it insanely confusing for them. Not sure what the workaround is here. I’d like to control default sort order per table.
2. Set width for select columns. My checkboxes are in an extra wide column and while it does not impede function, it sure is odd.
3. Control decimal limit by table.

Some of these could very well be user-error but wanted to share while it’s fresh.

[Thimo]

@janiece.lincoln

Default sort order. I notice that when my users add new values to the table, they’re appearing at the end of the list. This makes it insanely confusing for them. Not sure what the workaround is here. I’d like to control default sort order per table.

As you control the data series, you can give all your “Do a search for” a default sorting and that will reflect in the table.

@janiece.lincoln

Set width for select columns. My checkboxes are in an extra wide column and while it does not impede function, it sure is odd.

The checkbox column has a smaller min width than the rest of the columns. However, for this to work you need sufficient columns in your table:

@janiece.lincoln

Control decimal limit by table.

You can use Bubble to control the decimal limit:

[janiece.lincoln]

Thank you. One other thing that I am experiencing is it seems that when the user chooses to sort a date column, it doesn’t display table data in order. Here’s a screenshot showing what they see. You will see 2021 sprinkled in with dates like 2024 and 2025. I have settings as sort as a number across all numeric fields and I do not have any other sort commands in the ‘Do a search for…’

[Thimo]

@janiece.lincoln

One other thing that I am experiencing is it seems that when the user chooses to sort a date column, it doesn’t display table data in order

Right now, dates are automatically recognized. They should be in the format displayed on the demo page otherwise they will be sorted as texts. I am working on improvements for sorting dates so more formats are supported, but I can’t give an ETA for it yet. Hopefully this makes sense!

[johnnyweb]

Hello again @Thimo thanks for this plugin - I use it in a number of different builds

I’ve got one bubble instance where the checkboxes don’t appear - the column does but there’s nothing to see or select.

I’ve tried just putting a vanilla table on another page and selecting the checkbox option and it doesn’t’ appear there either.

I’ve been careful to compare the options on other bubble instances and everything appears without any issue.

In all cases I’ve disabled the Use Font Awesome option as I have a FA Pro plan and update the Header metatags but it’s working on other bubble builds so don’t think that’s it.

Any suggestions? What simple thing have I missed ?

Thanks in advance

[Thimo]

Hi @johnnyweb!

That is a weird issue. As it only does not work in a particular app, it seems like there is something about that app that causes the checkboxes not to show. Do you have any custom HTML or Plugins installed that could interfere with the checkboxes in the table?

[johnnyweb]

@Thimo I knew it would be a face palm thing

I forgot to check plugins for interference. We had this plugin Styled Checkbox Plugin | Bubble in there. Deleted it and all is well - thank you!

[sydney22]

I’m using the RG hidden variable strategy to set a range of entries from my database.

When the user picks a range from my dropdown, I’m setting the state of the upper and lower bound of the range.

This works pretty well for the first few batches, but I’m running into the loading issue again (table is empty) when I get to the 50,000-60,000 range. Is there another approach I can take to make sure the data loads?

[Thimo]

@sydney22

This works pretty well for the first few batches, but I’m running into the loading issue again (table is empty) when I get to the 50,000-60,000 range. Is there another approach I can take to make sure the data loads?

@sydney22 Did you already try using states to hold the data and setting a loader before setting the state and setting the loader state to ‘no’ after setting the data state? That way you should be able to know when the data is loading and you can handle that in your application.

I am not sure if I know any better solution here. If something else comes up I will definitely let you know!

[sydney22]

I did but I must have set it up incorrectly.

It holds for smaller ranges (1-5,000) but when it gets higher (45,000-50,000) it shows an empty table.

[Thimo]

@sydney22 It seems like you are only setting the pagination limit state in between setting the loading state. You need to save the actual data query the table is using to a state as that is what takes the longest (the “do a search for”)

[sydney22]

Correct, I was indeed setting the pagination limit to a state. Per your suggestion, I’m now setting the state to the data query, but I have to include the upper and lower limits otherwise the app will crash. Those limits are set when the user makes a selection from the dropdown, and fed into the data query state.

I’ve simplified the data source in the table to a state I’m calling table.

This improves performance a bit, but it doesn’t work above the 40-50k mark.

Not really sure what more I can do. I do appreciate your insights- you’ve been much more helpful than Bubble support which didn’t offer any of these suggestions.

EDIT: also read in the docs there is a 50,000 limit for sorted searches. Maybe that’s what’s causing the problem here?

EDIT #2: Is a conditional that detects whether the table is empty possible with the library? That might do the trick.

[Thimo]

@sydney22 I will send you a PM

[karan.prajapati]

The plugin Data Table / Grid / action Download CSV a Table / grid threw the following error: TypeError: Cannot read properties of undefined (reading 'forEach")
at eval (PLUGIN_1593724959866x956106696186921000/
Data- lable–Grid-element
action-- lable-/-gria-Download-
CSV-.js:3:979)
at [url]/package/run_js/
c5a6a08b65f370855aee8b1cb8fc5bcf3b4a1933f247f6bc
d8b8db4711a5/xfalse/x29/run.js:264:638 (please report this to the pluain author)

After update to new plugin.

[Thimo]

Hi @karan.prajapati, what do you exactly mean by “after update to new plugin”? Looking at the error it seems like our your data source is empty it you are triggering the download function while the table is not yet loaded / visible on the page. Could you make sure that is not the case?

[vincent.l.arena]

Hello! I found a bug where the checkbox action doesn’t seem to work in combination with pagination enabled.

It seems that the value “Selected checkbox ID (list)” ONLY returns value inside the first page. This means that if i select some rows, then go to the next page and select some other rows, and then come back the selected ids from the second page are missing. I tried to instead do a search for an object matching the clicked ID to manually set the selected objects myself, but It seems that actually the “Checkbox” action doesn’t work on any page but the first page because this workflow doesn’t trigger unless on page 1

Update: I’m noticing that it works as expected in step by step mode in the debugger but not in normal run mode. It also seems to run through the “if checked” workflow twice even though i only have one workflow.

Also: does clicking the checkbox also run the “This row is clicked workflow?”

[Thimo]

@vincent.l.arena

It seems that the value “Selected checkbox ID (list)” ONLY returns value inside the first page

Thanks for flagging! This was difficult to reproduce but I was able to fix it! I just pushed an update (2.71.4) that should fix it!

@vincent.l.arena

Also: does clicking the checkbox also run the “This row is clicked workflow?”

It should not, this is also not happening on the demo page: https://pluginpreview.bubbleapps.io/version-test/table