Forum Academy Marketplace Showcase Pricing Features

[New plugin] Fully Customizable Table / Grid

@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.

One more question!
I want to change the color for each cell value.
(I want to change the CSS for each cell value.)
For example, I want to change the color of each age from 10s to 20s, 30s to 40s, and 50s and up.
Is it possible?

I am not sure what goes wrong with your integration. It could be that your html/css code contains errors. I recommend that you take a look on the demo page to see how you display images.

Like you can see on the demo page at the html/BBcode demo, you can have conditional formatting. But, this works best for a small number of fixed values like cold, warm, hot etc. With ages it will be difficult because there are a lot of values

Thanks for the quick reply!

@Thimo I am not sure what goes wrong with your integration. It could be that your html/css code contains errors. I recommend that you take a look on the demo page to see how you display images.

I have it set up as shown in the image, but it doesn’t work. The image URL is displayed as text instead of an image.
スクリーンショット 2021-03-04 17.55.33
スクリーンショット 2021-03-04 17.55.44
(ex/ {{value}} => https://scontent-nrt1-1.cdninstagram.com/v/t51.2885-15/156577541_450063999603585_9191232124328003342_n.jpg?_nc_cat=110&ccb=3&_nc_sid=8ae9d6&_nc_ohc=ynC_qVVGEZ0AX-7OAAE&_nc_ht=scontent-nrt1-1.cdninstagram.com&oh=c58b6c50a99cc5706455fc4005986e42&oe=60677EA0
)

@Thimo Like you can see on the demo page at the html/BBcode demo, you can have conditional formatting. But, this works best for a small number of fixed values like cold, warm, hot etc. With ages it will be difficult because there are a lot of values

Is there a way to change it numerically?
For example, if you are between 10 and 30 years old, the column color is red; if you are between 30 and 50 years old, the column color is blue. Above that, it’s green. etc.
I would be happy if I could change the color in conditional as shown in the picture below.
I’m sorry for asking so many questions.

Hello @Thimo

The plugin looks promising. Can you have reusable elements inside the rows to do something like @simonperks81 suggested?

Also, somehow to have a “show more” button at the bottom to show more results via states instead of using pagination?

I´m trying to find a workaround so I can replace the RG with your plugin.

Thanks a lot.

It seems like that did not do it exactly as on the demo page. I recommend that you first use exactly the example on the demo page and edit it afterwards:

<img src="https:{{value}}">

<style>

img {
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

<style>

It is not possible to have a ‘>’ sign or something like that in CSS like you can read here. You can do something like this in your CSS, but it is a bit excessive:

.conditional-tag[data-color*="0 1 2 3 4 5 6 7 8 9 10"]{

 vertical-align: middle;
 pointer-events: none;
 cursor: default;
 background: rgba(92, 86, 255, 0.2);
 border-radius: 100px;
 color: rgba(92, 86, 255, 1) !important;
 height: 26px;
 padding: 5px 12px 5px 12px;
 text-decoration: none;
 text-align: center;
 width: 80px;
 }
1 Like

@ryanck

This is not possible at this time and I don’t think the library that is used supports it. But if this is possible in the future I will definitely try to implement it :slight_smile:

Yes please.

Do you maybe happen to have any workaround for this? You know I like your plugins man :slight_smile: and I would love to use it.

Thanks. I have a complete grasp of the situation.

1 Like

Actually I don´t need a reusable element but something like the group focus inside the cell so I can refer to the cell information.

If you think at any workaround, please let me know.

At this moment I don’t know if a workaround, but if I come across one I will let you know! :slight_smile:

1 Like

Hopefully you´ll have something :slight_smile:.

Thanks a lot @Thimo.

If you want to keep it like that, you have to add a semi colon “;” to end the style of the div, after “center”, then to close your image tag with “/>” or “”. Then it should be better.