Tags color in tables is not working

Hey there @andrea_bluelabs,

Is this still an issue you're seeing? I've passed along the fact that currentRow doesn't seem to be working in the "Tag color" field, but in the meantime can you try accessing that value using the i variable instead? Something like:

{{ yourTableName.data[i].is_locked ? '#C1E1C1' : 'redd' }}

Tag colors seem to work at all now.
It doesn't matter what I put in the Tag color box- it stays gray.

1 Like

Yeah, not sure why, please fix this

1 Like

@Kade333 This is working for me but it is also known by the Retool side that there is a bug somewhere associated with implementing colors on Tag (Dropdown) column type
Screen Shot 2022-06-29 at 7.07.02 AM

2 Likes

Hi @Kade333 and @andrea_bluelabs, It looks like the tag color is broken only when the column isn't editable. This issue has been reported to our engineering team and we'll be sure to update this thread once that issue is fixed. In the meantime, if the column isn't editable, then you might be able to use an HTML column or use the Background color input on the column editor modal to style the column as necessary.

If the column is editable then the tag color input will only apply to non-custom values (values that are included in the Data source input array) unless Unique column values is selected as the Data source input.

2 Likes

@everett_smith

I just tried it with a column that is not editable- and it still doesn't work.
I also noticed my picture in the first comment is a non-editable column as well.

When you checked that, did you try toggleing the edit on then off? If you do that it defaults back to Auto and does not use your JS anymore.

I am also having some issues to change the tag colors with JS. Looks like the same problem described as described above. Any solution?

Thanks

Same error here
I've applied the same rule as above and all options are grey.

Hey @lucascmrosa!

At the moment (2.102.0) this appears to be working as long as the column is editable which it looks like it is in your case. Can you try referencing item.status in your ternary instead of item?

To other folks looking for workarounds here: you might try having the column be an editable one but setting "Read only" to be true.

2 Likes

Hey all! Doing some circling around the forums to let people know that the Tag type is being deprecated specifically for Custom Columns, more info and a workaround here.

For normal columns, this behavior should be fixed! Let me know here if you're still seeing issues with the Tag type in columns that are not Custom Columns, and otherwise please refer to the linked thread with any questions :slightly_smiling_face:

1 Like

I'm still having issues with this column type. In the module I can see it working effectively but in the app where the module is used all the cells are rendered blank. I have had this issue with this column type many times in the past too - it's incredibly frustrating

Hey @Jack_Coates!

Sorry that you're still running into issues here. Would you mind sharing a bit more about the configuration of your module? What kind of data is being passed to this column and how?

I tried briefly to recreate the behavior you're describing but was seeing all the data show up so it'd be helpful to get some more specifics. Screenshots are great, an export of your app or permission to step in and view it directly also works!

I have a table containing a color value from our in house theme i.e "B50"
I then also have a temp state called colors with which contains the relevant hex values
{
B50: "#F3F6FA",
}
In the tag column I then set the tag color with the following JS {{colors.value[self]}}

I wish to do a color validation on a column called investment status ( completed vs in progress. The column is a tag

[{{ table5.data.investment_status === "Completed" ? 'green': 'red'}}](https://)

I want completed to be green, otherwise red. This code turns everything red

Hey @Chilaka!

To give more context to this thread, the above issue is solved in the new version of table which is rendering colors more consistently. If you'd like to define the color of a tag in there based on the tag value you can do so by referencing the item variable in the "Color" field e.g. {{ item === "Completed" ? 'green': 'red'}}:

This can be done in the legacy table as well!

1 Like

Thanks, very helpful

Hi @Kabirdas!

I was just playing around with Tags in the new table component, when I noticed that that manual color override is not available for this format:

However for the Tag format the manual color override is available.

Is it a bug that the color override for Tags is not available, or is this intended behaviour?

Thanks for your time!

Hey @avr!

If you go to the "Option list" settings of the multi-tag column you should be able to set colors there:

Does that work?

1 Like

Hi @Kabirdas,

That works :+1:

In my opinion it feels like the color and icon configuration should rather be part of the Appearance section than the Option List add-on. Just my two cents.

Anyway thanks for your time!

2 Likes