[New plugin] Fully Customizable Table / Grid

Don’t know about anyone else, but I’m seeing the following since the latest update:

table_2

Is it just me?

@sydney22 No styling got changed and I also do not see this in my own apps and the demo page. Could it be that you installed a different plugin or some custom HTML/CSS on the page that causes this? Maybe you can try placing the table on a blank page to see if this still happens :slight_smile:

Thanks, @Thimo. No custom code, I’m thinking it’s just a bad internet connection.

1 Like

It isn’t just you. I’m seeing that on Firefox and Chrome. Edge is fine though.
Examples:

Edge:

Firefox:


(also the search bar and header row are poorly rendered)

Chrome:

1 Like

I rolled back to version 2.54.1. That’s the most recent version of the plugin I could find that didn’t have these rendering issues in Firefox and Chrome (Edge was also affected, but not 100% of the time.)

1 Like

Yep, I’m on Chrome.

@jsterling (@sydney22 ) unpkg (the CDN that delivers the JS for the table) seems to be down/buggy in a lot of countries right now. Lets wait untill that is resolved to see if that resolves the issue

1 Like

Back to normal for me!

Noticing a slight header text cutoff, not sure if it’s related to the new updates but wanted to pass it along.

cutoff

@Thimo Hi Thimo, quick question! We’re using the table in a group but it seems like there is an issue with adjustability with the last column. Every other column width can be adjusted except the last one. It behaves exactly like the one on your demo page except that the last column will not adjust no matter what I do. Any thoughts? Thank you!

Hi @schweizerm02, not sure if I 100% understand the issue. I will send you a PM so we can take a better look!

You were absolutely right, it works fine in all versions now. Thank you!

@Thimo I’m curious, it is possible to capture an event like “A table/grid Back button has been clicked”, “A table/grid Forward button has been clicked” etc?

I’m using an API with built-in pagination, but I want to synchronize actions in your table/grid element to calls I make to the API to fetch the next page of data.
I am imagining it working like this:

  1. I set “Don’t refresh table” in the element
  2. I set the data source as my API with start position and page length as custom states I can manipulate in a workflow
  3. I create a workflow to catch “A table/grid Next button is clicked”, as an example
  4. I update the custom states to establish a new start position
  5. I tell the table/grid element to re-render itself

There might be some other tweaking necessary to make this really work as one would need to be able to advance the page position as opposed to just using Previous/Next buttons, but you get the idea.

Is this something you’ve been considering?

I can implement this by turning off pagination and creating my own buttons to control the table, but was curious to hear your thoughts. Thank you!

I will need to explore if this is possible! It is not supported to have ‘custom pagination’ like this by the library, but maybe I can do something custom :slight_smile:
I will put it on my list but I can’t give you an ETA for it right now

I am having an issue where using the Table/grid element causes some icons such as the book icon to change appearance upon becoming visible. Any idea why this might be? Thanks!

Please look at the post below

1 Like

Hi @Thimo

I’m encountering an issue, which seems to be a bug related to custom HTML code. Here’s my column (pasted from the design tab, not the workflow):

It works fine, and I have something like that:

I have a table based on dynamic parameters, and when the user changes some filters, they might get no results. In that case, I see the following, which is also fine:

The problem occurs when the user changes filters again, gets some results, and then it seems like the column doesn’t consider the HTML part and just passes the value from the “Data Source”:

Do you have any ideas on how to resolve this issue?

Thank you so much for your help, and for providing such a great plugin!

Hi @Thimo
I haven’t touched the plugin yet, I was wondering about if your table allows to append new rows instead of columns. I’m still pretty new to bubble as well so I keep misunderstanding how certain elements and plugins are made so I just wanted to ask if there was a way to append a new row like how you can append a new column in the demo.

I was also wondering if I could make specific columns to be editable, like a input for text or dropdowns.

Is there a specific reason you are using checkboxes using the HTML field and not the checkbox feature from the table itself? You can enable checkboxes using this checkbox:

If not, maybe you can try to use the ‘re-render’ workflow action when this happens to see if that fixes your issue.

Every column is its own data source. So if you need to add a row you will need to create a new thing for that data type. You can look at the editor of the demo page to see how the table is setup: Pluginpreview | Bubble Editor