CODEWITHSUNDEEP
reactjsantdmobx
FreeClimb
FreeClimb

Reputation: 706

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

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

Upvotes: 3

Views: 8880

Answers (3)

Hooman
Hooman

Reputation: 1925

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.

Upvotes: 1

Nechama
Nechama

Reputation: 91

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

Upvotes: 8

Danila
Danila

Reputation: 18476

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.

Upvotes: 0

Related Questions