# Power table row and cell gradient coloring **URL:** \ **Category:** Ignition\ **Tags:** ignition81, vision, scripting\ **Created:** [June 30, 2023, 4:01am UTC](https://forum.inductiveautomation.com/t/power-table-row-and-cell-gradient-coloring/75754 "2023-06-30T04:01:39Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![Dan\_Kevin\_Dagapioso](https://avatars.discourse-cdn.com/v4/letter/d/eb9ed0/32.png) [@Dan\_Kevin\_Dagapioso](https://forum.inductiveautomation.com/u/Dan_Kevin_Dagapioso)\ **Post date:** [June 30, 2023, 4:01am UTC](https://forum.inductiveautomation.com/t/power-table-row-and-cell-gradient-coloring/75754/1 "2023-06-30T04:01:39Z")
Can I color my power table component with gradient colors? ---
**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:** [June 30, 2023, 6:35am UTC](https://forum.inductiveautomation.com/t/power-table-row-and-cell-gradient-coloring/75754/2 "2023-06-30T06:35:29Z")
Sure. You would need to apply the CSS style to your table cells (assuming it's not the table background you want to modify). ![Table linear-gradient](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/5/d586e975c537168cd3b13c58d86ce098810f2be3.png) In the sample above you can see that "country" and "population" are simple values but that "city" has been converted to an object with style properties. Linear-gradient can be defined in there. You can instead apply the gradient to the whole column using `props.columns.0.sytle.background-image : linear-gradient(to right, blue, white)` or similar. This would eliminate the need to modify the data as shown above. [https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Table#PerspectiveTable-Example2:StylingRowsBasedonValue-DatasetData](https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Table#PerspectiveTable-Example2:StylingRowsBasedonValue-DatasetData) Really you should define the formatting in a Perspective style and then apply that class to the object being modified. This makes it very easy to maintain a professionally consistent look and feel across your application and a modification just requires an adjustment to the style - once! Also, I recommend using built-in theme colors so that the application looks good in light and dark modes. [https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes](https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes) ---
**Author:** ![Dan\_Kevin\_Dagapioso](https://avatars.discourse-cdn.com/v4/letter/d/eb9ed0/32.png) [@Dan\_Kevin\_Dagapioso](https://forum.inductiveautomation.com/u/Dan_Kevin_Dagapioso)\ **Post date:** [June 30, 2023, 6:37am UTC](https://forum.inductiveautomation.com/t/power-table-row-and-cell-gradient-coloring/75754/3 "2023-06-30T06:37:17Z")
sorry but my project is in vision not perspective. ---
**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:** [July 11, 2023, 10:45am UTC](https://forum.inductiveautomation.com/t/power-table-row-and-cell-gradient-coloring/75754/4 "2023-07-11T10:45:30Z")
What an interesting challenge. This problem has been bugging me in the back of my brain every since I read it, and I've been hoping somebody would come up with a solution. I finally found some time this morning to mess around with it, and so far, this is all I have been able to come up with that approximates what you've asked for. It's definitely not a finished product, but at least it's a direction you could explore: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/6/e6e61c490ca1c36a5c8a69b7668e8ccef8b34df6.png) Here is the script that runs in the configureCell extension function: ```auto #def configureCell(self, [...], colView): from java.awt import GradientPaint from java.awt.image import BufferedImage from javax.swing import ImageIcon if selected: return {'background': self.selectionBackground} if rowView % 2 == 0: colorOne = system.gui.color(255,0,0) colorTwo = system.gui.color(0,255,255) else: colorOne = system.gui.color(0,255,0) colorTwo = system.gui.color(0,0,255) text = textValue font = self.font renderer = self.table.defaultCellRenderer editor = self.table.getCellEditor(rowIndex, colIndex) cellRect = self.table.getCellRect(rowIndex, colIndex, True) gradient = GradientPaint(0, 0, colorOne, cellRect.width, cellRect.height, colorTwo) image = BufferedImage(cellRect.width, cellRect.height, BufferedImage.TYPE_INT_ARGB) graphic = image.createGraphics() graphic.setPaint(gradient) graphic.fillRect(0, 0, cellRect.width, cellRect.height) fontMetrics = graphic.getFontMetrics(font) textWidth = fontMetrics.stringWidth(text) textHeight = fontMetrics.height x = int(0.5*(float(cellRect.width) - float(textWidth))) y = int(0.5*(float(cellRect.height) + float(fontMetrics.ascent - fontMetrics.descent))) graphic.setColor(system.gui.color(255, 255, 255)) graphic.setFont(font) graphic.drawString(text, x, y) graphic.dispose() renderer.icon = ImageIcon(image) renderer.text = None return {'renderer':renderer} ``` Basically, the script replaces the text with a gradient image that has the text drawn on it. However, if the cell is selected, it does not do this. The script does not work with a boolean column, although it could if it were developed further to draw the checkbox. Also, it exhibits some unexpected behavior if auto row height is selected. I'm guessing it's because he cellRect.height property is slightly taller than the row height forcing a resize when repaints occur. If the autoRowHeight property is important to your table, it could probably be fixed by calculating the image height a different way. ---
**Author:** ![Dan\_Kevin\_Dagapioso](https://avatars.discourse-cdn.com/v4/letter/d/eb9ed0/32.png) [@Dan\_Kevin\_Dagapioso](https://forum.inductiveautomation.com/u/Dan_Kevin_Dagapioso)\ **Post date:** [July 14, 2023, 2:04am UTC](https://forum.inductiveautomation.com/t/power-table-row-and-cell-gradient-coloring/75754/5 "2023-07-14T02:04:24Z")
woah. Thanks I will definitely explore it and try it. ---
**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:** [July 25, 2023, 10:34am UTC](https://forum.inductiveautomation.com/t/power-table-row-and-cell-gradient-coloring/75754/6 "2023-07-25T10:34:16Z")
> [@justinedwards.jle](#): > > The script does not work with a boolean column, although it could if it were developed further to draw the checkbox I have developed a way for a separate problem that would work for the Boolean columns in this problem. The code has been posted here: > [@\[IGN-6531\]The check-mark box is not visible (it is transparent) in ignition version 8.1.17](https://forum.inductiveautomation.com/t/ign-6531-the-check-mark-box-is-not-visible-it-is-transparent-in-ignition-version-8-1-17/63435/18): > > Recently, I was messing around with [painting the cells of a power table a gradient color](https://forum.inductiveautomation.com/t/power-table-row-and-cell-gradient-coloring/75754/4), and the process gave me an idea on an alternative approach to this old problem. Combining what I learned painting the gradient cells and [code I had previously developed for changing the checkbox size on the alarm status table](https://forum.inductiveautomation.com/t/alarm-table-checkbox-size/67665/2), I was able to produce this work around using the configureCell extension function: The code checks each column to see if the column class is Boolean. If not, it colors the… > [@justinedwards.jle](#): > > Also, it exhibits some unexpected behavior if auto row height is selected. Also, I was able resolve this issue in the above example by simply subtracting a small margin from the cell rectangle dimensions.