[New plugin] Fully Customizable Table / Grid

@sydney22 How did you change the color/style the checkboxes in your table?

I didn’t- this was an example of a select-all gutter I pulled off the internet. Not sure that’s possible with this library.

@Thimo

Is it possible to have the columns and rows be created by two different list of things in the database?

For example, do a search for a thing, and make a column for every thing that exists.

Hey @stephencharles! Not 100% sure if I understand, but columns show the data provided for it. You can’t really add the columns separately from the rows as the “column” in questions just displaying the data. So these 2 things can’t be added separately.

Can I customize a font-awesome icon color somehow?

I have a boolean value that returns fa-check for yes and fa-times for no and I was trying this way but didn’t work:

<span class="boolean-icon" data-icon={{value}}>[fas] {{value}} [/fas]</span>

<style>

.boolean-icon[data-icon*="fa-check"]{
    color: rgba(92, 86, 255, 1) !important;
 }

.boolean-icon[data-icon*="fa-times"] {
  color: rgba(255, 165, 0,  1) !important;
}
</style>

Hi @software10!

Font awesome icons will always inherit the styling from the cell itself. If you want to display different icons based on yes and no I would recommend to conditionally display the SVG like in this example I made (the SVGs from my demo come from the Heroicons library):

Demo: Pluginpreview | Bubble Editor

Hopefully this helps! :slight_smile:

1 Like

Nice one, thank you!

Another question, can I use an icon on the table buttons instead of a text?

@software10 At this time icons are not supported within the buttons. I will put it on my list as something to look into!

1 Like

Thank you!

Another request I would appreciate if you add, allow me to apply border-radius to the table container.
screenshot 2024-04-11 at 09.59.22

Your CSS uses !important so I can’t change it by applying a global CSS on Bubble settings.

@software10 It is unfortunately not that straightforward to add a border radius (especially in cases pagination is enabled). I just pushed update 2.70.2 that removes the “!important” tags from the border radius properties, so you can try to implement border radius using CSS :slight_smile:

Also, the update 2.70.2 replaced the CDN that is used for the dependencies, the plugin was using UNPKG. As UNPKG is down right now I replaced the CDN, so this plugin should not be affected by the current outage!

1 Like

Hi there @Thimo - I regret to report the center styling no longer seems to work in v2.70.2 as in prior versions… you can see this for yourself on your demo page. All the best to you.

@jsterling it actually still works, but you need to include the width in the CSS :slight_smile:

Apologies if this has been answered, but I couldn’t find it: is there a limit to the number of rows the table will support? I have 400,000 which I’m guessing will impact performance. My plan was to change the data source with a dropdown or input tags.

Hi Thinmo,

On the selection column, could we get a checkbox icon option?

  • Josh

Screenshot 2024-04-18 at 11.08.46 AM

1 Like

Hi @sydney22, No there is no limit, but showing that many items could cause performance issues.

1 Like

Hi @josh10! Thanks for the request! After looking into it I don’t think this is natively supported by the library, but I will put it on my list to see if I can build something custom. I assume when that checkbox is clicked it will select all the items in the table right

2 Likes

Is there a way to either
1 - set a specific column width or min-width OR
2 - prevent column contents from overflowing the column

Hi @hhenske! Right now you can only set a width for all the columns in the table. Could you tell me more about your second point? Where are you seeing content overflowing the cells exactly? Thanks! :slight_smile:

That’s correct…essentially a select all. I was able to insert an emoji checkmark, but it just doesn’t look as great as a functioning one.

1 Like

I just realized I’ve dealt with this before in a different place.

We have overlapping content. (I am trying the same as I did last time: adding CSS rules:
overflow: hidden; width: fit-content; max-width: 100%; text-wrap: nowrap;
which works, but not well.

Can you think of a reason why a table would load one way on page load and a different way when returning via a “change a different user” button?
image
image