Selected Row Coloring in Table

💬 App Building
16

Hi @mdsmith1,

You can change the color of the row with the method I shared in my posts and as it is shown in the screenshot that I originally sent.

Let me see if I can break it down further:

  • The "Row Color" setting is expecting a color, whether is RGB, HEX or CSS named color.
  • This setting is dynamic for each row, as such you can write a script that will make a calculation based on the data for each row. So you could create different combinations to have rows being colored differently, for example you could have a RAG combination of colors based on whether the amount in a column is higher, lower or equal to a given value.
  • Within Row color you can refer to the data in each row using currentRow (which uses all of the columns that you have defined in your table) or currentSourceRow which uses the original data source for your table, regardless of columns having being removed.

So, having said that, you mentioned you have a column, called SerialNo. (the actual name is the one that appears in the "id" field within the column, retool may have automatically changed it to snake format, i.e. serial_no). As such, within the Row Color setting you can use currentRow.serial_no (or whatever the id of the column is) to then apply a condition. As you want to change the color of the selected color then you can compare if this id matches with your table's selectedRow property. If true then select the color you want, otherwise then default to null or " " which will not apply any color.

This is why I suggested something like {{ currentRow.serial_no === table1.selectedRow.serial_no ? "black" : "" }} With this short script you are actually going row by row, and comparing whether that row's primary key matches with the actual selected row, if it does then it will apply "black" color (or whatever color you choose) to that row, and will not apply any color to the rest of the rows which will return a false to the terniary statement.

Does this help?

With regards to the last screenshot you sent me, you only need to hover your mouse's cursor above currentSourceRow so that it shows you all the available keys you can use to write the script. By default it will show the keys and values of the first row in your table (remember this Row color will apply the script to all the rows).

Best,
Miguel

2 Likes