[New plugin] Fully Customizable Table / Grid

Awesome - thanks for the quick response!

Just bought it!

Also I noticed in the example you are doing API call for every field instead of a single API call and just displaying the results.

Would storing the List, whether API or a search, somewhere else on page and referencing it be more optimal to save trips to the API or DB?

@gf_wolfer Thats great to hear!

In my experience I have noticed that it doesn’t affect the performance when doing the same API call multiple times (same for ‘do a search for’). It seems like Bubble does some caching in the background. If you are experiencing different behaviour, you could ofcourse save the API output in a state and refer to it that way :slight_smile:

I knew they did some caching but never really tested it so thanks for the info!

@Thimo Having some sorting issues with empty fields, it can also be seen on the main Demo page; here sorting by List example or Option set example give some odd results.

Screenshot_022321_100320_AM

The ideal sorting logic seems to be working with the Nested thing field though - not sure if it’s because they are Numbers instead of text

Think there is something that can be done to improve the Sorting with empty fields?

1 Like

@gf_wolfer Thanks for flagging! I just pushed an update (2.12.0) that should improve this. In that version the null values will be replaced by “” which should sort them correctly. I tested it and the sorting on the demo page now works as expected :slight_smile:

Amazing, thanks for the quick fix!

1 Like

Impressive, so fast! Well done @Thimo, the table grid plugin is more than useful and efficient!

Still seems to be something odd with the Sorting which I noticed in my app and also in the Demo page:

Screenshot_022721_094325_AM
Screenshot_022721_094349_AM

Not sure if this is a null value issue or the last John and Eric values should be above the null and with the other John and Eric values

@gf_wolfer It seems like I forget to account for null option set values :hushed:

I just pushed a new update (2.13.0) that should fix this. It is now also working on the demo page :slight_smile:

1 Like

In my app the issue was for Data Type: text (formatted as phone numbers) - this update seems to have fixed them too :metal:

Again thanks for the fast fix!

1 Like

Hi @Thimo great plugin - even for an absolute newbie like myself.

It might also explain why my question might be potentially very basic. I cannot for the life of me figure out how to display a yes/no for a data field in one of the columns. I’ve set the column data type to a yes/no and searched for the data types data field that is a yes/no.

Your help would be appreciated.

@olatoye I have updated the demo to include a boolean example (column 8) :slight_smile: The key here is to use the ‘:formatted as text’ operator.

Demo: https://pluginpreview.bubbleapps.io/table
Editor: Pluginpreview | Bubble Editor

1 Like

Wow! @Thimo as I read your response I knew exactly what I’d been doing wrong. Worked 100%. Thanks man - I appreciate the quick assist

1 Like

In practice this didn’t work well for my use case with Bubble data :frowning:
Not the fault of the plugin, just that Bubble needs to download 3,000 pieces of Bubble data to the table before the table can become visible on the page or display field values. The same loading issue would happen if trying to display all 3,000 records at once in a repeating group.

So unfortunately I will have to stick with a Repeating Group with vertical scroll for now. Hope to find a use case for this plugin in my app though as I like it’s design and functionality :+1:

1 Like

One flaw that I noticed with the plugin (my bad that I purchased it without trying one month subscription) is that it is column based instead of row based. So, I just define the columns separately. However, what if in a particular row one column is empty? In that case the value belonging to next row will show in current row. That is a big issue.

Other issue is that since I define full column source at once with just a choice of field from existing fields, I can’t do any combination of elements or do some small calculation etc.

Hope these are possible I am proven wrong.

@mghatiya

This only happens when you are showing data from different data types. When the columns are showing data from the same thing an empty cell will be empty because the value is ‘null’ for that cell (you can see the empty values on the demo page). If you are showing data from different data types you should make sure that the data lists have the same length, or you could group the list by a shared field.

Yes you can do this. You will have to use the ‘:formatted as text’ operator in combination with the ‘:extract with regex’ operator. I have updated the demo to include a calculation example in column 9. You can create all kind of calculations using this method. It will also allow you to alter the cell data in a particular way :slight_smile:

Demo: https://pluginpreview.bubbleapps.io/table
Editor: Pluginpreview | Bubble Editor

Has anyone styled the background color based on cell value? For one of my columns, users can pick from one of three options: hot (red), warm (orange), cold (yellow). I want to use color coded tags based on the value they select so that they’re not all uniform like the Advanced styling column in the demo.

In HTML/BBCode, I tried the following, but couldn’t get it to work:

<a href=# class=“tag” data-color=“{{value}}">{{value}}</a>

<style>

.tag[data-color=“Cold"]{

 vertical-align: middle;
 pointer-events: none;
 cursor: default;
 background: rgba(240, 255, 0, 0.2);
 border-radius: 100px;
 color: rgba(255, 255, 255, 1) !important;
 height: 26px;
 line-height: 26px;
 padding: 5px 12px 5px 12px;
 margin: 0 10px 10px 0;
 text-decoration: none;

 }

.tag[data-color=“Warm”] {

  vertical-align: middle;
  pointer-events: none;
  cursor: default;
  background: rgba(255, 165, 0, 0.2);
  border-radius: 100px;
  color: rgba(255, 255, 255, 1) !important;
  height: 26px;
  line-height: 26px;
  padding: 5px 12px 5px 12px;
  margin: 0 10px 10px 0;
  text-decoration: none;

}

.tag[data-color=“Hot”] {

  vertical-align: middle;
  pointer-events: none;
  cursor: default;
  background: rgba(255, 0, 0, 0.2);
  border-radius: 100px;
  color: rgba(255, 255, 255, 1) !important;
  height: 26px;
  line-height: 26px;
  padding: 5px 12px 5px 12px;
  margin: 0 10px 10px 0;
  text-decoration: none;

}

</style>

@sydney22

Your code contains a couple of errors. You used the “ a couple of times instead of ", and you should use *= instead of =. Also you should not put {{value}} inside " "

I have cleaned up your code a bit and added it as an example to the html/BB code demo! :slight_smile:

See it here (column 6):
Demo: https://pluginpreview.bubbleapps.io/table
Editor: Pluginpreview | Bubble Editor

1 Like

Awesome! I wanted to post since I figured others might be trying to do the same thing. Very cool to make it part of the demo. Thanks, @Thimo!

1 Like