Ant-Design Table not rendering when change state in mobx store - reactjs

Question

I program the behavior of clicking on a row in the ant design Table component. This should change the rowClassName on the Table. Here is an example on CodeSendBox. When you click on a table row, the value in the Store.selectedRowKey changes, but the table is not re rendering. If you move the dividing slider to the sandbox and the table size changes, then rendering occurs and a new row selection is applied
Here's another example, where mobx don't work with ant-design Table
Ant Design Table with Modal form CRUD
I'm new in the Mobx
I really want to understand what I'm doing wrong

Answer 1

To re-render an Ant-Design table, you have to pass the data-source value as a clone of the observable value.
you have to change
<Table
columns={columns}
dataSource={values}
/>
to the following code:
<Table
columns={columns}
dataSource={[...values]}
/>

Answer 2

Basically you don't use selectedRowKey inside your observer component, so that's why it does not rerender when it changes.
You pass a callback function to a Table but Table is not observer.
I am not sure if it possible to make it observer in antd, but what else you can do:
1) Just use selectedRowKey inside your render somewhere. Like just console.log it and then your whole component will rerender (including the Table) when row is clicked.
Or better way, mix it with data rows, for example add isSelected key for each data for inside render and change rowClassName to use this flag:
dataSource={data.map(item => ({...item, isSelected: this.props.Store.selectedRowKey === item.key}))}
rowClassName={x => x.isSelected ? 'test-table-row-selected' : ''}
2) Use antd rowSelection prop like that rowSelection={{selectedRowKeys: [selectedRowKey]}}. But it will also add checkboxes to each row.

Answer 3

I can imagine that people are still looking for answers specially with the newest version of antd.
So in Antd version 5.x table API, you could find a property call rowKey.
In version 4.0 table API, the property called key thou.
And to way to tackle the problem correctly is to set it like following:
<Table
columns={columns}
dataSource={data}
rowKey={data.key} />
Note: Please consider to have a key property in your array of course. key must be unique.