# Change a cell's background on a table

**URL:** <https://forum.inductiveautomation.com/t/change-a-cells-background-on-a-table/95797>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 10, 2024, 1:25pm UTC](https://forum.inductiveautomation.com/t/change-a-cells-background-on-a-table/95797 "2024-09-10T13:25:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cesar\_Felipe](https://avatars.discourse-cdn.com/v4/letter/c/c37758/32.png) [@Cesar\_Felipe](https://forum.inductiveautomation.com/u/Cesar_Felipe)\
**Post date:** [September 10, 2024, 1:25pm UTC](https://forum.inductiveautomation.com/t/change-a-cells-background-on-a-table/95797/1 "2024-09-10T13:25:58Z")

</div>

Hi,

I trying to change the background for the selected cell. I'm not able to use the function correctly.

I have the row and column information selected but I cannot enter the column in the function I am using.

I would like to use this function in such a way that it changes any cell that is selected by the user.

Could anyone help me?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/3/f3ebb3f25ddc59aff5e4dbfdab53c617715f99e9.png)

---

<div class="post-metadata">

**Author:** ![DNice](https://avatars.discourse-cdn.com/v4/letter/d/858c86/32.png) [@DNice](https://forum.inductiveautomation.com/u/DNice)\
**Post date:** [September 10, 2024, 1:30pm UTC](https://forum.inductiveautomation.com/t/change-a-cells-background-on-a-table/95797/2 "2024-09-10T13:30:55Z")

</div>

Is your dataset JSON? that is the only way this will work.  
Once it is in JSON format, you should be able to navigate directly to a cell and set the self.props.data[ROW][COLUMN].style.backgroundColor = "xxx"

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [September 10, 2024, 1:43pm UTC](https://forum.inductiveautomation.com/t/change-a-cells-background-on-a-table/95797/3 "2024-09-10T13:43:59Z")

</div>

You need your data to be in a special format for this to work.

The basic format looks like this:

```python
[
  {
    'column1': value,
    'column2': value,
    ...
  },
  {
    'column1': value,
    'column2': value,
    ...
  },
  ...
]

```

where each dict represents a row, and each key/value pair in that dict represents a column.  
To apply style to a whole row, you'll need this kind of format:

```python
[
  {
    'value': {
      'column1': value,
      'column2': value,
      ...
    },
    'style': {
      'backgroundColor': 'red',
      ...
    }
  }
  ...

```

note:  
Looks like you put that script in a button ?  
Why not put it in the table's `onRowClick` event instead ?

Add a `selected_row` custom prop to your table to hold the currently selected row and put this in the table's `onRowClick` event:

```python
def runAction(self, event):
	if self.custom.selected_row is not None:
		self.props.data[self.custom.selected_row]['style'] = {}
	if self.props.data[event.rowIndex].has_key('style'):
		self.props.data[event.rowIndex].style.backgroundColor = 'blue'
	else:
		self.props.data[event.rowIndex] = {
			'value': self.props.data[event.rowIndex],
			'style': {
				'backgroundColor': 'blue'
			}
		}
	self.custom.selected_row = event.rowIndex

```

The custom prop is used to keep track of the previously selected row, so that you can remove the style.

---

<div class="post-metadata">

**Author:** ![Cesar\_Felipe](https://avatars.discourse-cdn.com/v4/letter/c/c37758/32.png) [@Cesar\_Felipe](https://forum.inductiveautomation.com/u/Cesar_Felipe)\
**Post date:** [September 10, 2024, 4:41pm UTC](https://forum.inductiveautomation.com/t/change-a-cells-background-on-a-table/95797/4 "2024-09-10T16:41:01Z")

</div>

Thank you.

Your suggestion met what I was trying to do.  
It was a question of syntax error