[New plugin] Fully Customizable Table / Grid

Thanks for the prompt response–really appreciate it.

Unfortunately, it doesn’t solve the issue, because I get a list of roles that are not associated to the employees who hold those roles.

But I think this is a good way to discuss the problem. What I–and perhaps others who’ve raised the feature request–are really aiming for is a combination of your nested thing example and your list example.

In your screenshot above, you’d get to the problem if you made the “Data” field within “Table data” a list instead of a single instance. If you did this, you’d find that you would not get the right output if you used the set up above.

Thanks!

Couple of questions re: the 2.16.0 release. I was able to display a delete button triggered by clicking a checkbox. I can successfully delete one row at a time but am having trouble deleting multiple checked rows. What’s the best way to set the unique id to achieve this?

Also, will there be an option to select all in the column header?

Lastly, I noticed with this update that my tables were occasionally blank. I had to downgrade to 2.15.0 and then switch back to 2.16.0 for the data to display again. Has anyone else experienced this?

@sydney22

You can edit multiple data entries client side in combination with the list shifter plugin. I have created a demo for your here: Designpreview | Bubble Editor

However, editing multiple data entries client side may cause some performance issues when you are editing big amounts of data. You could also do this server side using API workflow on a list.

I will look into this if I can add this feature! :slight_smile:

Thats odd! I haven’t noticed this but I will definitely keep an eye on it to see if this is happening elsewhere.

1 Like

Hmm, so it looks like the checkbox ID wasn’t used at all. I’m not looking to edit a specific column so much as delete the entire row(s). Was hoping the checked box would act like a clicked row and that every row with a checked box could then be deleted.

I think client side should be ok since this will only be used to delete a handful of rows at a time, similar to Gmail.

The checkbox IDs are actually getting used inside the ListShifter element:

This is also possible. There is a ‘checkbox is clicked’ event that triggers every time a checkbox is clicked. You can use that to delete selected rows as they are getting selected. Is that the behaviour you are looking for?

1 Like

Yes! Exactly this. I used the event to display a trash icon and want to delete the checked rows once the trash icon is pressed. However, I could only get it to delete one row at a time instead of all the checked rows.

@sydney22 I think you should be able to implement the method which you can see on the demo page from before:

You can replace the edit workflow action with a delete action to delete multiple rows (data entries). I think that should work. Does that make sense?

Thanks, @thimo. My progress bar fires off rapidly for each row, but it does the job. Powerful feature for an already great plugin!

1 Like

@Thimo

Any chance you can add the option to replace null values with zeroes, or show me how to do this if the option already exists? When a column is a list of numbers, it can be better from a user’s perspective to have a “0” displayed instead of an empty cell.

I did a quick test using the same data source in RGs (each column is a separate RG) vs. Table/Grid. It seems Bubble automatically replaces null numbers with “0”, but the T/G plugin leaves them blank.

RG Table
image

T/G Plugin (same data source)

Your ApexCharts plugin already replaces null with “0’s” which is great, as it would be confusing for users if there we gaps in a chart (screen shot of “Offers” column is below)

Thanks!

@benedict

You could do this with a variant of the ‘calculation example’ on the demo page. I think it would be better to have an option inside the plugin to handle this though. I will definitely look into that. For now, you can take a look at the demo below for an example of how to do it:

Hey @Thimo, I’d be interested in purchasing this, but a feature I’d really like is the ability to control the height of the viewport for the table. Does your plugin give that ability?
As well, I like the look of the table, but I find the rows are quite thick. Is there a way to control the thickness of the rows?

Thanks!

Hi @steve18

Yes, you can change the vertical (as well as the horizontal) padding for the rows:

This will look like this for example:

Cool, thanks @Thimo. Any thoughts on the viewport size?

When having pagination enabled, you can specify the amount of items per page:

The table element will automatically expand to fit all the rows. When pagination is disabled, the table will be as long as all the entries inside the table.

Does that help? :slight_smile:

It helps a lot; thanks. I think this is the table solution for me. Another purchase of your stuff! You make good plugins, pal…

1 Like

Thanks, glad to help! Let me know if you have any other questions :slight_smile:

1 Like

So, I’ve now purchased 3 different table solutions for bubble, and this is BY FAR the best one. Don’t spend $100 chasing the right table solution like I did – buy this one and rejoice!

Awesome @steve18! Really great to hear that your are enjoying the plugin! :slight_smile:

1 Like

Great plugin @Thimo !
Question, Design thing:
When i load the grid it adapts to the screen layout (responsive). that’s great, but The top (search) and bottom line (next, previous) do not adapt the same as the table itself.
See:
thimo

@Thimo Is it possible to make that look nicer? :wink:

Hi @lakeman,

This is actually not supposed to happen. Normally is should look like this (it stretches to the full width of the table):

Did you maybe disable the ‘Auto width’ feature, or do you have custom CSS on the page that might interfere with this?

You can stretch the search bar to the full width of the table by enabling this feature: