Change a cell's background on a table

Ignition
1

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
image774×127 6.79 KB

2

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"

1 Like
3

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

The basic format looks like this:

[
  {
    '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:

[
  {
    '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:

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.

4

Thank you.

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