[New plugin] Fully Customizable Table / Grid

Amazing work - thanks! Now i can select on all (odd numbered) pages - that works great
UPDATE: It only works on odd number pages, lol

I have a workflow that is running when the row is selected and another one that runs every time something is checked…
For my application the “row is selected workflow” is running when i check the checkbox. Here’s a loom video with the behavior: Understanding Checkbox and Row Click Triggers | Loom

EDIT: In your demo you use the condition “As long as the clicked column’s title is not empty… proceed with clicking the row” - i added this workaround but clicking the check IMO shouldn’t trigger that workflow by default?

Hi @vincent.l.arena

Yes, this should not happen. There is actually logic that tries to prevent this, but in some apps this does not seem to work, therefore the conditional you can see on the demo page. I will put it on my list to see if I can improve the logic so the conditional is not necessary :slight_smile:

Could you explain a bit more about the issue? This is working for me on all pages without an issue (even and odd numbered). Any reproducible steps?

Here’s a video showing the issue, which is actually working fine in debug mode but not in run mode…

I hate to be that guy but I’m reporting one other bug which is very annoying and might make me have to unsubscribe from the plugin if i can’t figure out a workaround… whenever i load the table grid, all multi select dropdowns on the page have super messed up css. Could be a name of one of your vairables or classes that overrides bubble.io’s multiselect?

Thanks! Let me know if there’s any other way i want to help. Clearly going through a lot of effort because I think this plugin is awesome if it can work reliably without breaking other things

@vincent.l.arena I will send you a PM so we can look into more details!

Thimo informed me that using html styling was the issue, and i was able to find a solution… if you are going to use html you might want to create specific selectors instead of using classes like span or img that will impact the entire application. Instead of this which gave me errors:

<img src="{image url}" class="custom-img"> <span class="custom-span">{title}</span>

<style>
.custom-span {
    margin-left: 5px;
    align-self: center;
}

.custom-img {
    vertical-align: middle;
    width: 25px;
    height: 25px;
}
</style>

Instead use this:

<img src="{image url}" class="custom-img"> <span class="custom-span">{title}</span>

<style>
.custom-span {
    margin-left: 5px;
    align-self: center;
}

.custom-img {
    vertical-align: middle;
    width: 25px;
    height: 25px;
}
</style>

A couple feature suggestions (amazing plug-in by the way!):

  1. Add the option to reference “button column index” or “button #”, currently only column name and row index are available.

Workaround is to add names to the button columns which I didn’t really want to. Maybe there is another option?

  1. Add the option to customize the button fonts and border.

This would allow the use material icons font for example, making the icons clickable.

1 Like

Hi @vic1! Thank you for the feature requests. I have added them to my list so I can explore if they can be implemented. :slight_smile:

I have two features enabled which appear to be conflicting.

  1. I have ‘when a row is clicked’ workflow setup to load a popup.
  2. I have enabled checkboxes to enable me to create some bulk apply options.

I am finding that when clicking a checkbox to select it, it is triggering the ‘when a row is clicked’. Is there any way to ‘exclude’ the checkbox column from the ‘when a row is clicked’ clickable area?

@nigel.clark Please take a look at the demo page: https://pluginpreview.bubbleapps.io/version-test/table

You can see that I put a conditional on the “row is clicked” event to only trigger when column name is not empty, that way you filter out the checkbox event.

It is on my list though to let the plugin handle this, however it is a bit more complicated than I thought

anyone experiencing a horizontal scroll when the selecting fix header footer?

I am using chrome.

Hi @stuart4

The table will always horizontal scroll if you add enough columns. Enabling the fixed header / footer will not prevent this from happening.

Hopefully this makes sense!

@Thimo looking for some help with the plugin! Just subscribed, seeing it works for our use case.

So I am trying to do a search in a column of a different date type in relation to the data type of the row.

Example:
I have a table that shows all events.

I am trying to pull all orders specific to that event to do a sum and show the total revenue for that specific event.

I am able to pull in the data in the column" sort of" but it doesnt match the correct event

Hi @dan11!

Did you already take a look at the demo page? Especially this column:

That will show how you could refer to another column inside your data series while keeping the number if items the same.

Will check it out here today and report back! Thank you

Hey! Seeing the example but I am trying to use the current cell to do a search on a different data type. Looking over the demo page now and not seeing how to do that