# Table row background color **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [May 19, 2024, 11:01am UTC](https://forum.inductiveautomation.com/t/table-row-background-color/90591 "2024-05-19T11:01:42Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [May 19, 2024, 11:01am UTC](https://forum.inductiveautomation.com/t/table-row-background-color/90591/1 "2024-05-19T11:01:42Z")
Good morning everybody, I normally use the configureCell in Vision Power Table and with it is pretty easy to configure the row background color based on a cell value. In this case I have a Table in Perspective and I populate it with a named query. I need to read a specific cell for each row and if that value is greater than a setpoint I have to change the background color and the text forecolor. I read in the forum but it looks like this is quite difficult to do (I see a lot of script to do something that in Vision is very easy to do). Maybe I didn't find an easy example that explain it. Thanks for the help ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [May 19, 2024, 12:56pm UTC](https://forum.inductiveautomation.com/t/table-row-background-color/90591/2 "2024-05-19T12:56:08Z")
One of the fundamental differences between Vision and Perspective is that Vision can and does apply styling at the point where it paints in the client (which is what `configureCell` does), while Perspective needs to have all of its styling delivered **with the data** , because there is no custom scripting posible where the painting occurs. This is why, in Perspective, you must transform your table data to include styling in the cells that need it. You cannot do this with dataset format on `props.data`. If you do not need the dataset itself elsewhere in your bindings, add a transform to `props.data` that will convert your dataset to a list of dictionaries, with nested dictionaries that include a style key where you need styling. (See the sample data of a table for the structure needed.) If you also need the original dataset for other purposes (later export, perhaps), move your NQ binding to a custom property, then bind `props.data` to the custom prop and then transform. (Or use an expression binding if using my Integration Toolkit to avoid scripting overhead.) ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [May 19, 2024, 1:19pm UTC](https://forum.inductiveautomation.com/t/table-row-background-color/90591/3 "2024-05-19T13:19:02Z")
The documentation gives good examples but I recommend that you study the data on the Table component default data (city, country, population) and, in particular, how the data for Folsom is modified to give the orange background. > **[Styling Rows Based on Values | Ignition User Manual](https://docs.inductiveautomation.com/docs/8.1/appendix/components/perspective-components/perspective-display-palette/perspective-table/styling-rows)** > > This page includes examples detailing different ways to style rows based on values using Script Transforms. Each example accomplishes similiar results through different binding and data types to change the background color of a row or individual... It does look a bit complicated at first but it's actually not too bad and very flexible. ---
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [May 19, 2024, 1:30pm UTC](https://forum.inductiveautomation.com/t/table-row-background-color/90591/4 "2024-05-19T13:30:31Z")
Thank you all for the explanation and the help. I will study the documentation and I will make some test. Have a nice Sunday. ---
**Author:** ![danieltalbot](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/danieltalbot/32/11201_2.png) [@danieltalbot](https://forum.inductiveautomation.com/u/danieltalbot)\ **Post date:** [May 20, 2024, 1:39pm UTC](https://forum.inductiveautomation.com/t/table-row-background-color/90591/5 "2024-05-20T13:39:15Z")
Hope this helps! > [@Cell color related to content in Ignition Perspective](https://forum.inductiveautomation.com/t/cell-color-related-to-content-in-ignition-perspective/89269/8): > > Hope this helps. [[How to Dynamically Style Individual Table Cells] ](https://www.youtube.com/watch?v=OFxTmLNGQWk) ---
**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\ **Post date:** [May 21, 2024, 7:47am UTC](https://forum.inductiveautomation.com/t/table-row-background-color/90591/6 "2024-05-21T07:47:14Z")
Hello @danieltalbot I using your example and works very fine. how to do if I want to use the custom styles for all the columns, not just RIESGO? if({view.params.rowData.RIESGO} = 1, "#E60012", if({view.params.rowData.RIESGO} = 2, "#F0B473", if({view.params.rowData.RIESGO} = 3, "#ECF293", if({view.params.rowData.RIESGO} = 4, "#73F093", if({view.params.rowData.RIESGO} = 5, "#aaa794", if({view.params.rowData.RIESGO} = 6, "#ffa7cc", "")))))) If I want to use it in more columns could do something like this? if({view.params.rowData} = 1, "#E60012", if({view.params.rowData} = 2, "#F0B473", if({view.params.rowData} = 3, "#ECF293", if({view.params.rowData} = 4, "#73F093", if({view.params.rowData} = 5, "#aaa794", if({view.params.rowData} = 6, "#ffa7cc", "")))))) ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [May 21, 2024, 9:40am UTC](https://forum.inductiveautomation.com/t/table-row-background-color/90591/7 "2024-05-21T09:40:32Z")
This would look cleaner if it were refactored into a [case](https://www.docs.inductiveautomation.com/docs/8.1/appendix/expression-functions/logic/case) expression. ```python case( {view.params.rowData.RIESGO}, 1, '#E60012', 2, '#F0B473', 3, '#ECF293', 4, '#73F093', 5, '#aaa794', 6, '#ffa7cc', '' ) ``` ---
**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\ **Post date:** [May 21, 2024, 9:41am UTC](https://forum.inductiveautomation.com/t/table-row-background-color/90591/8 "2024-05-21T09:41:25Z")
how would it be if I want do generic style for all the columns, not just RIESGO ---
**Author:** ![danieltalbot](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/danieltalbot/32/11201_2.png) [@danieltalbot](https://forum.inductiveautomation.com/u/danieltalbot)\ **Post date:** [May 21, 2024, 3:23pm UTC](https://forum.inductiveautomation.com/t/table-row-background-color/90591/9 "2024-05-21T15:23:53Z")
If you want to color entire rows, the simplest way of doing this is with a script transform on the table's data binding. The same video I linked above should cover what you need to know for that result. If you want to color entire columns, I believe the simplest way of doing this is with the column object style property. My personal opinion, I don't color entire rows because I think it can quickly become very distracting and overwhelming to the user when there is so much color on the page. I try to use color sparingly, so I usually just create an additional 'state' or 'status' column with an embedded view that has an icon or label and sets the color depending on the incoming rowData param. ---
**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\ **Post date:** [May 21, 2024, 3:26pm UTC](https://forum.inductiveautomation.com/t/table-row-background-color/90591/10 "2024-05-21T15:26:16Z")
Hi @danieltalbot yes your view make a lot of sense What I want is something like: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/4/c4bdc50f2e80c62e8dbccd0e92b10eeac1cf6447.jpeg) So I guess a good option is go column by column with your method. ---
**Author:** ![danieltalbot](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/danieltalbot/32/11201_2.png) [@danieltalbot](https://forum.inductiveautomation.com/u/danieltalbot)\ **Post date:** [May 21, 2024, 3:31pm UTC](https://forum.inductiveautomation.com/t/table-row-background-color/90591/11 "2024-05-21T15:31:16Z")
Yes, for that you could either configure your columns to all use the same embedded view to handle the style, or transform the data into a json format where each column has a value and dynamic style property. ---
**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\ **Post date:** [May 21, 2024, 3:33pm UTC](https://forum.inductiveautomation.com/t/table-row-background-color/90591/12 "2024-05-21T15:33:13Z")
@danieltalbot what would be the condition for all to use same embeded view instead just RIESGO column in this case ```python if({view.params.rowData.RIESGO} = 1, "#E60012", if({view.params.rowData.RIESGO} = 2, "#F0B473", if({view.params.rowData.RIESGO} = 3, "#ECF293", if({view.params.rowData.RIESGO} = 4, "#73F093", if({view.params.rowData.RIESGO} = 5, "#aaa794", if({view.params.rowData.RIESGO} = 6, "#ffa7cc", "")))))) ``` ---
**Author:** ![danieltalbot](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/danieltalbot/32/11201_2.png) [@danieltalbot](https://forum.inductiveautomation.com/u/danieltalbot)\ **Post date:** [May 21, 2024, 3:34pm UTC](https://forum.inductiveautomation.com/t/table-row-background-color/90591/13 "2024-05-21T15:34:41Z")
```python if({view.params.value} = 1, "#E60012", if({view.params.value} = 2, "#F0B473", if({view.params.value} = 3, "#ECF293", if({view.params.value} = 4, "#73F093", if({view.params.value} = 5, "#aaa794", if({view.params.value} = 6, "#ffa7cc", "")))))) ``` ---
**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\ **Post date:** [May 21, 2024, 3:35pm UTC](https://forum.inductiveautomation.com/t/table-row-background-color/90591/14 "2024-05-21T15:35:11Z")
Oh great! thanks a lot @danieltalbot ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [May 21, 2024, 5:25pm UTC](https://forum.inductiveautomation.com/t/table-row-background-color/90591/15 "2024-05-21T17:25:00Z")
I still recommend cleaning up the nested _[redundant]_ `if` statements. ```python case( {view.params.value}, 1, '#E60012', 2, '#F0B473', 3, '#ECF293', 4, '#73F093', 5, '#aaa794', 6, '#ffa7cc', '' ) ```