Conditional graphic element or html inside a cell of a bootstrap table

Wappler General How To
#1

Hi everyone,

I have a bootstrap table working fine, with sorting and a number of dynamic attributes such as highlighting when hovering. A particular column displays a number, either 1, 2 or 3, and my goal is to reflect this other than a number, for example an RAG indicator (Red, Amber or Green). I’ve tried toggling classes using warning, danger, success, but they don’t seem to be taken into account, I guess because of the sorting, etc…

My next step was to try to put some inner html and was open to having a dirty solution like calling a 1.png, 2.png and 3.png image, but I can’t get that to work either. I then attempted to get an FA icon with different classes, and same, I fail.

What would be your suggestion to proceed?
This is what I have:
tier
This is what I’d be looking to have:
tier2

Thanks!

#2

I would suggest that you could add 3 FA icons and add dynamic attributes to show on a specific condition:

  1. Choose the first cell and add a FA icon
    image
    image
  2. For each FA icon choose Dynamic Attributes and set the ‘Show’ attribute
    image
  3. Set the condition when you want the icon to show
    image

You can style the icons with individual colours as you wish.

To begin with I was struggling because I had both show and hide attributes on items - you couldn’t (and I still don’t think you can) have a mixture on one element.

#3

Thanks for your help @bpj, this is what I attempted and the FA icons mysteriously do not display.
My code is as follows:

<td dmx-text="eq_tier">
	<i class="fas fa-genderless" dmx-show="(eq_tier == 1)"></i>
	<i class="fas fa-flag" dmx-show="(eq_tier == 2)"></i>
    <i class="fas fa-thumbs-up" dmx-show="(eq_tier == 3)"></i>
</td>
1 Like
#4

You can’t use bot inner text (dmx-text) and actual data In the cell.
Just remove the dmx-text attribute and put it’s value in the cell.

<td>
    {{eq_tier}}
	<i class="fas fa-genderless" dmx-show="(eq_tier == 1)"></i>
	<i class="fas fa-flag" dmx-show="(eq_tier == 2)"></i>
    <i class="fas fa-thumbs-up" dmx-show="(eq_tier == 3)"></i>
</td>
1 Like
#5

Thanks @Teodor. I actually didn’t want the inner text at all, I have it working now.
Cheers to the both of you. :+1:

2 Likes
#6

It’s set by default in the table generator UI. You can change that in the binding type option there.