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

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

To re-render the ant design table I use the hook explained here: https://stackoverflow.com/questions/46240647/react-how-to-force-a-function-component-to-render — jailson pacagnan, Apr 28 '21 at 17:14

score 8 · Answer 1 · answered Aug 22 '20 at 20:03

8

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]}
/>

answered Aug 22 '20 at 20:03

Nechama

91
1
5

@Nechama can you explain why this is the case? – miles.sherman Jul 22 '21 at 20:15
Seems inefficient performance-wise, but that was the only way it worked for me, too – csotiriou Aug 15 '21 at 08:25
@miles.sherman Ant table is rerendered only if dataSource is a new object. In your case the object is the same – Vasiliy Shiryaev Jan 12 '22 at 23:55

score 0 · Answer 2 · answered Jun 10 '20 at 09:59

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.

score 0 · Answer 3 · answered Dec 23 '22 at 16:07

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.

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

3 Answers3

Linked