Category: UI Widgets
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

Change color of row based on value

Issue

I am trying to edit the style of a table widget in Appsmith by changing the cell background color using a Javascript command. Despite following Appsmith help articles for the correct syntax, I am receiving an error message stating that "currentRow is not defined." I am trying to change the entire row's background color based on the data in a column, but it seems I will have to set the condition for each column individually. I believe the table styling should be able to access the currentRow information.

Resolution

The user was trying to edit the cell background color field in a table widget in Appsmith. They wanted to change the entire row's background color based on the data in a column. However, when they tried to use the syntax {{ currentRow.sunShipByDate = “” ? “Red” : “” }}, they received an error message.

The solution was to change the style from the column settings of the sunShipByDate field. In the column settings, the user clicked the settings icon for the desired column and went to the style tab. They then used the syntax {{ currentRow.sunShipByDate == “” ? “Red” : “” }} to change the background color of the cell based on the data in the sunShipByDate column.

However, since the user wanted to change the entire row's background color based on the data in a column, they would have to set the condition for each column separately. Although the table styling should be able to access the currentRow and change the entire row's background color, this was not possible in this case.