Manually adding items to props.selection.data on Table is being overwritten on first write

[liam1]

I am trying in implement a multi-data point selection with a onClick Add and Remove for my table

I have noticed , that when trying to add a item to the props.selection.data for the first cycle , the array gets reset but any attempt afterwards, works perfectly fine.

This is issue causes ui to fall out of sync with what is actually inside the props.selection.data array.

Here is the onRowClick event script I am using:

	rowIndex=event.row
	self.props.data[rowIndex].selected=not self.props.data[rowIndex].selected
	
	# check if row is selected
	if self.props.data[rowIndex].selected:
		# if row is not inside selection data , add it
		if  self.props.data[rowIndex].BatchID not in [ x['BatchID'] for x in self.props.selection.data]:
			self.props.selection.data.append(self.props.data[rowIndex])
		
	else:
		# if row is not selected
		
		data={x['BatchID']:i for i,x in enumerate(self.props.selection.data)}
		# if row is in selection data , remove it.
		if  self.props.data[rowIndex].BatchID in data.keys():
			self.props.selection.data.pop(data[self.props.data[rowIndex].BatchID])

Is there a fix for this?

Should I add a onChange check to the props.selection.data to resync the table ui?

[Transistor]

It's probably not going to work for you. There is some good explanation here:

Select all rows in a perspectives table

Unfortunately, Table.props.selection.data is read-only, and writing data to that property will not modify the state or appearance of the Table. The primary reason for this is that there is no guarantee of uniqueness in Table data. Imagine you had a Table with a single column "x" (just to keep the example simple), and it only had three rows: x ----- 1 2 1 Suppose now that you wrote the row data for the 2th (3rd) row with the expectation that the 2th row would display as selected. Well.…

[liam1]

I ended up using a custom property to stored selected data which resolved this issue.