# Table Row Background color, from scripting event. It's broken

**URL:** <https://forum.inductiveautomation.com/t/table-row-background-color-from-scripting-event-its-broken/100268>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [December 27, 2024, 4:51pm UTC](https://forum.inductiveautomation.com/t/table-row-background-color-from-scripting-event-its-broken/100268 "2024-12-27T16:51:07Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![mdemaris](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdemaris/32/54639_2.png) [@mdemaris](https://forum.inductiveautomation.com/u/mdemaris)\
**Post date:** [December 27, 2024, 4:51pm UTC](https://forum.inductiveautomation.com/t/table-row-background-color-from-scripting-event-its-broken/100268/1 "2024-12-27T16:51:07Z")

</div>

I am following this guy's video on YT: [Artek Solutions](https://www.youtube.com/watch?v=NKPXSzarpcc)

I have most of it working except for the background color styling on the Add and Delete button events.

The data comes in from an NQ, then a script transform like this:

```python
def transform(self, value, quality, timestamp):
	columns = self.SetColumns(value)
	output = []
	
	for row in range(value.getRowCount()):
		row_value = {"updateMe":False, "deleteMe":False}
		for col in columns:
			colName = col["field"]
			cellValue = value.getValueAt(row, colName)
			row_value[colName] = {"value":cellValue, "action":"update", "enabled":True, "display": True, "style":{}}
			if colName == "Description":
				row_value[colName]["enabled"] = False
		output.append(row_value)
		
	return output

```

I have three embedded components: text field, drop down and numeric input.

This is the numeric input:

```python
{"type":"view","payload":{"view":{"path":"Test Views/Scripting/embed/numericField","width":100.0,"height":32.0,"params":{"column":"","isRequired":true,"placeholder":"","rowData":{},"rowIndex":"","source":1,"value":""}}}}

```

And this is the delete button:

```python
[
  {
    "type": "ia.input.button",
    "version": 0,
    "props": {
      "text": "Delete"
    },
    "meta": {
      "name": "btn_Delete"
    },
    "position": {
      "x": 110.944375,
      "y": 412.3,
      "height": 30,
      "width": 80.05
    },
    "custom": {},
    "events": {
      "component": {
        "onActionPerformed": {
          "type": "script",
          "scope": "G",
          "config": {
            "script": "\tds = self.parent.custom.data_in\n#\theaders = [col for col in ds.columnName if col != 'Price']\n#\ttype_of_price = ds.getColumnType(ds.getColumnIndex('Price'))\n#\tprice = [0 for _ in xrange(ds.rowCount)]\n#\tds = system.dataset.filterColumns(ds, headers)\n#\tds = system.dataset.addColumn(ds, price, 'price', type_of_price)\n\t\n#\tfor row in xrange(ds.getRowCount()):\n#\t\tds = system.dataset.setValue(ds, row, 'price', 0)\n#\tself.parent.custom.data_in = ds\n\n\ttable = self.getSibling(\"Table_0\")\n\tcolumns = table.props.columns\n\tselectedRow = table.props.selection.selectedRow\n\tdata = table.props.data\n\t\n\tif selectedRow is None:\n\t\tpass\n\telif data[selectedRow]['ReqID']['value'] is None:\n\t\tdel table.props.data[selectedRow]\n\telse:\n\t\ttable.props.data[selectedRow]['deleteMe'] = True\n\t\t\n\t\tfor col in columns:\n\t\t\tcolName = col.field\n\t\t\ttable.props.data[selectedRow][colName][\"style\"][\"background-color\"] = \"var(--error)\"\n\t\t\t"
          }
        }
      }
    }
  }
]

```

This is the table's custom method to create the table structure:

```python
	true = True
	false = False
	try:
		columns = system.dataset.getColumnHeaders(value)
	except:
		columns = value[0].keys
	
	output = []
	for col in columns:
		colObject = {"field": col, "visible": true, "editable": false, "render": "auto", "justify": "auto", "align": "center", "resizable": true,
					 "sortable": false, "sort": "none", "filter": { "enabled": false, "visible": "on-hover", "string": { "condition": "", "value": ""},
					 "number": {"condition": "", "value": ""},
					 "boolean": {"condition": ""},
					 "date": {"condition": "", "value": ""} },
  					 "viewPath": "", "viewParams": {}, "boolean": "checkbox", "number": "value", 
  					 "progressBar": {"max": 100, "min": 0, "bar": {"color": "", "style": {"classes": ""} }, 
  					 "track": {"color": "", "style": {"classes": ""} }, "value": {"enabled": true, "format": "0,0.##", "justify": "center", 
  					 "style": {"classes": ""}}}, "toggleSwitch": {"color": {"selected": "", "unselected": ""}},
  					 "nullFormat": {"includeNullStrings": false, "strict": false, "nullFormatValue": ""},
					 "numberFormat": "0,0.##", "dateFormat": "MM/DD/YYYY", "width": "", "strictWidth": false,
					 "style": {"classes": ""},
  					 "header": {"title": "", "justify": "center", "align": "center", "style": {"classes": ""}},
  					 "footer": {"title": "", "justify": "left", "align": "center", "style": {"classes": ""}}}
  					 
  		if col == "ItemID":
  			colObject['render'] = "view"
  			colObject['viewPath'] = "Test Views/Scripting/embed/numericField"
  			colObject['viewParams']['source'] = self.custom.table_id
  			colObject['viewParams']['isRequired'] = True
  			colObject['header']['title'] = "Item ID"
  			colObject['visible'] = False
  		elif col == "DateReceived":
  			colObject['render'] = "view"
  			colObject['viewPath'] = "Test Views/Scripting/embed/textField"
  			colObject['viewParams']['source'] = self.custom.table_id
  			colObject['viewParams']['isRequired'] = True
  			colObject['header']['title'] = "Date Rec'd"
  			colObject['visible'] = True
  		elif col == "ReqID":
  			colObject['render'] = "view"
  			colObject['viewPath'] = "Test Views/Scripting/embed/numericField"
  			colObject['viewParams']['source'] = self.custom.table_id
  			colObject['viewParams']['isRequired'] = True
  			colObject['header']['title'] = "Req ID"
  			colObject['visible'] = True
  		elif col == "Quantity":
  			colObject['render'] = "view"
  			colObject['viewPath'] = "Test Views/Scripting/embed/numericField"
  			colObject['viewParams']['source'] = self.custom.table_id
  			colObject['viewParams']['isRequired'] = True
  			colObject['header']['title'] = "Qty"
  			colObject['visible'] = True
  		elif col == "QtyReceived":
  			colObject['render'] = "view"
  			colObject['viewPath'] = "Test Views/Scripting/embed/numericField"
  			colObject['viewParams']['source'] = self.custom.table_id
  			colObject['viewParams']['isRequired'] = True
  			colObject['header']['title'] = "Qty Rec'd"
  			colObject['visible'] = True
  		elif col == "Price":
  			colObject['render'] = "view"
  			colObject['viewPath'] = "Test Views/Scripting/embed/numericField"
  			colObject['viewParams']['source'] = self.custom.table_id
  			colObject['viewParams']['isRequired'] = True
  			colObject['header']['title'] = "Price"
  			colObject['visible'] = True
  		elif col == "LeadTime":
  			colObject['render'] = "view"
  			colObject['viewPath'] = "Test Views/Scripting/embed/numericField"
  			colObject['viewParams']['source'] = self.custom.table_id
  			colObject['viewParams']['isRequired'] = True
  			colObject['header']['title'] = "Lead Time"
  			colObject['visible'] = True
  		elif col == "PartNumber":
  			colObject['render'] = "view"
  			colObject['viewPath'] = "Test Views/Scripting/embed/textField"
  			colObject['viewParams']['source'] = self.custom.table_id
  			colObject['viewParams']['isRequired'] = True
  			colObject['header']['title'] = "Part #"
  			colObject['visible'] = True
  		elif col == "Description":
  			colObject['render'] = "view"
  			colObject['viewPath'] = "Test Views/Scripting/embed/textField"
  			colObject['viewParams']['source'] = self.custom.table_id
  			colObject['viewParams']['isRequired'] = True
  			colObject['header']['title'] = "Description"
  			colObject['visible'] = True
  		elif col == "UOM":
  			colObject['render'] = "view"
  			colObject['viewPath'] = "Test Views/Scripting/embed/textField"
  			colObject['viewParams']['source'] = self.custom.table_id
  			colObject['viewParams']['isRequired'] = True
  			colObject['header']['title'] = "UOM"
  			colObject['visible'] = True
  		elif col == "Container":
  			colObject['render'] = "view"
  			colObject['viewPath'] = "Test Views/Scripting/embed/textField"
  			colObject['viewParams']['source'] = self.custom.table_id
  			colObject['viewParams']['isRequired'] = True
  			colObject['header']['title'] = "Container"
  			colObject['visible'] = True
  		
 		# set visible columns
 		
 		output.append(colObject)
 	
 	self.props.columns = output
 	return output

```

Hope this is enough.

Thank you.

---

<div class="post-metadata">

**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:** [January 1, 2025, 6:14pm UTC](https://forum.inductiveautomation.com/t/table-row-background-color-from-scripting-event-its-broken/100268/2 "2025-01-01T18:14:56Z")

</div>

Hey that's my video. Is it just the background colors that aren't working from the Add and Delete buttons? Other than the colors, are the buttons adding and deleting the rows as expected? After clicking one of the buttons, check the table's data property - look at the row you added/deleted and make sure that each column's style.background-color property is updating.

---

<div class="post-metadata">

**Author:** ![mdemaris](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdemaris/32/54639_2.png) [@mdemaris](https://forum.inductiveautomation.com/u/mdemaris)\
**Post date:** [January 2, 2025, 5:50pm UTC](https://forum.inductiveautomation.com/t/table-row-background-color-from-scripting-event-its-broken/100268/3 "2025-01-02T17:50:37Z")

</div>

Aha, I knew you were on the forums somewhere! Really like the work.  
Colors - when I click Add I see a flash of orange, then all goes back to default colors.  
Row are added and deleted as expected.

  
This vid shows the add feature, but with new data.

After clicking Delete:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/1/0168d91e1d551e50185ed0fa9ff7d1ebdd139fd5.png)

> [@danieltalbot](#):
>
> column's style.background-color property is updating

Ok, column style is not updating.

This is the Delete code:

```python
table = self.getSibling("Table_0")
	columns = table.props.columns
	selectedRow = table.props.selection.selectedRow
	data = table.props.data
	
	if selectedRow is None:
		pass
	elif data[selectedRow]['ReqID']['value'] is None:
		del table.props.data[selectedRow]
	else:
		table.props.data[selectedRow]['deleteMe'] = True
		
		for col in columns:
			colName = col.field
			table.props.data[selectedRow][colName]["style"]["background-color"] = "var(--error)"

```

---

<div class="post-metadata">

**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:** [January 2, 2025, 7:30pm UTC](https://forum.inductiveautomation.com/t/table-row-background-color-from-scripting-event-its-broken/100268/4 "2025-01-02T19:30:55Z")

</div>

Try adding a style to the embedded component:  
background-color: transparent

I had a style class set up on my embedded component in the video, and I overlooked it, but I believe this is why you aren't seeing the colored rows. Let me know if that fixes it.

---

<div class="post-metadata">

**Author:** ![mdemaris](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdemaris/32/54639_2.png) [@mdemaris](https://forum.inductiveautomation.com/u/mdemaris)\
**Post date:** [January 2, 2025, 11:04pm UTC](https://forum.inductiveautomation.com/t/table-row-background-color-from-scripting-event-its-broken/100268/5 "2025-01-02T23:04:03Z")

</div>

Yep! That's it. Thanks Daniel!

---

<div class="post-metadata">

**Author:** ![mdemaris](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdemaris/32/54639_2.png) [@mdemaris](https://forum.inductiveautomation.com/u/mdemaris)\
**Post date:** [January 3, 2025, 11:12pm UTC](https://forum.inductiveautomation.com/t/table-row-background-color-from-scripting-event-its-broken/100268/6 "2025-01-03T23:12:48Z")

</div>

@danieltalbot How about the disabled components? Yours do not appear grayed out and unclickable. How did you disable them and still make them look normal?

---

<div class="post-metadata">

**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:** [January 4, 2025, 12:44am UTC](https://forum.inductiveautomation.com/t/table-row-background-color-from-scripting-event-its-broken/100268/7 "2025-01-04T00:44:29Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/6/86b55d44e31e11ae3cfe4d0ab905b4667049345c.png)

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

having background-color (or backgroundColor) set to transparent on the embedded component will override the gray background when the component is disabled. You can make the component blend in even more with the table if you turn off the border (border: none).

---

<div class="post-metadata">

**Author:** ![mdemaris](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdemaris/32/54639_2.png) [@mdemaris](https://forum.inductiveautomation.com/u/mdemaris)\
**Post date:** [January 4, 2025, 1:45am UTC](https://forum.inductiveautomation.com/t/table-row-background-color-from-scripting-event-its-broken/100268/8 "2025-01-04T01:45:29Z")

</div>

Got it, I think my brain got distracted (scrambled, more likely) with the ability to edit, with the orange background, and the disabled background colors.

Thanks!