[New plugin] Fully Customizable Table / Grid

Thanks @Josh10 for the suggestion. I also got an update from Thimo that if we add the rerender step in the workflow, there wouldn’t be a need to add the pause, which I have tested and is working fine.

1 Like

Hey @Thimo,
Hope all well man!

I have a status field on my Thing. It’s an option set with a Display Attribute (ie. Draft) and an Index # attribute (ie. 1).

When you Sort by this column, I want to be able to use the Index # as the value to sort, but show the Display as the cell value (ie. maintain the order of the statusses).

Is this possible?

Hi @kai!
Right now is not supported to sort a column on a different list unfortunately

1 Like

Hi @Thimo one more question on this plugin. Is there any way to make the formatting of the selected row remain different after the click? I want my users to click one row and then click a button for the next step, but I would like the row to remain visually selected after their click and prior to hitting the button. I don’t see an obvious way but also it’s a complicated plugin so maybe I’m missing something.

Thanks!
Steve

Hi @Steve_W

Not sure if I understand your question completely. Are you saying that the checkbox in the table unchecks itself when you click on a button outside the table?

No checkboxes this time.

I want a table with one button outside of it. I want to click a row in the table, and then click the button to send the ID of that row to the next page. <— This works fine using the “Clicked ID” state of the table.

What is missing is after I click a row in the table I want that row to remain visually distinct from the other rows. I want a “clicked” style so that whichever row is currently clicked can have a different background color than the rest, also different from the hover color.

Basically I don’t want the user confused about which row is currently selected, and I don’t want to use checkboxes because on this page, only one row is allowed to be selected at a time before moving on.

I see. Styling individual rows is not supported at this time. I am not sure how feasible this is, but I’ve put it on my list to explore possibilities

1 Like

Is there anyway to do conditions on the action buttons? THings like hover states, or changing the text shown at times? I don’t see a way to apply conditions to the specific buttons?

Ah ok. Since the row style can change for hover, I hoped it would be a simple matter to let it change persistently based on the clicked row, but as with many things I have no idea how it works under the hood.

Thanks!

Here with a potential bug! I noticed that when using this plugin (not loaded on default) as soon as a click the button to show the plugin SOME of the elements (of type icon, particularly red checkboxes) are becoming invisible. I am using some custom HTML and i tried removing that but the problem still persists. My intuition is that there is some class this plugin is using that is over-riding the icon’s display setting and I tried a few attempts to manually over-ride this by increasing the z-index of those elements to 10,000 but nothing works. Any thoughts? I put two before and after images, what happens to the icons when i load the plugin…


@vincent.l.arena Are you using font awesome icons? The plugin loads a version of the font awesome library by default. So that might be the cause. You can disable that by unchecking the following checkbox:

1 Like

Thanks that fixed it for anyone else experiencing the issue!

@Thimo. Great plugin and well deserved that it’s paid. I noticed that in element actions you cannot change (list) of things data. So the only way to change the data, as a list is the duplicate the do a search for somewhere else not on the table. Am I missing something? Or, right now is the plugin missing a quick feature to edit a list of things? Thanks in advance!

Hi @maddison.l apologies, I am not sure if I 100% understand your question. Are you asking if you can change the data inside the table using the plugin? Right now you can’t change the data directly inside the table as the table is to made to display data only. You can use the row is clicked workflow event to, for example, open a popup to edit the data over there. Let me know if this helps! :slight_smile:

You answered my question. Thank you.

Hey @Thimo

Seeing this weird layout / styling when my client ran through things on their browser (this a screenshot from a Loom video)

It’s a Mac running Chrome, very similar to my browser set up

Client experience:

My experience (intended)

Why do you think this could be?

Hi @Thimo - I would like to change the formatting of the clicked cells to visually show which cells are being clicked in a table. I see in the demo app that conditional formatting is possible based on clicked data value, but is there a way to do the same for all clicked cells, regardless of the data.

When I try to add some conditions in the data source to see if a state (where we keep track of clicked ids) contains table/grid’s clicked cell ID, plugin throws an error saying circular reference is being made, understandably.

Is there any suggestions to accomplish conditional formatting for all the clicked cells?

Hi @Thimo , hope you are well! A quick question. Our app has search results that are brought into Bubble’s default RGs via APIs - things like sorting lists and paging through results (and searching/paging while sorting) is all done through dozens of actions and workflows which makes everything super complicated. Does your table allow for this kind of complexity?

Thanks for your time!

Are you maybe hiding and showing the chart in a one page app? This should not happen, but you can run the ‘re-render’ workflow after showing the table to fix this :slight_smile:

It is not supported yet to change the style of certain rows/cells individually. I will put this on my list, but I am not sure if it can be implemented