Forum Academy Marketplace Showcase Pricing Features

[New plugin] Fully Customizable Table / Grid

@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

Hi @Thimo
I would like to ask you three questions.

・The data in the cell is initially aligned to the left.
Is it possible to make it center-justified?

・Is it possible to disable the sort for a specific column?
I don’t use to sort photos by URL.

・Is it possible to specify the search target of the search box? (Currently it looks like it is searching from all the displayed column data. I want to search from the ones that are not displayed.
(Currently it looks like it is searching from all the displayed column data.

@miura

Yes this is possible using the HTML field for the column. I have updated the HTML/BBcode demo to include an example of this in column 7:

I just pushed an update (2.14.0) to make this possible! You can specify the names of the columns you want to disable sorting for. To for example disable sorting for the columns ‘Name’ and ‘Email’ you can do this:

With this result:

I looked into this, but this is unfortunately not supported by the library (yet). If this gets implemented in the future I will definitely implement it inside the plugin :slight_smile:

2 Likes

amazing !!!
Thank you so much.


sorry.
This is the part that you fixed.
Is it possible to disable the sort for a specific column?
the image URL was displayed instead of the image.