How to update antd table with mobx when observable changes - antd

Question

my antd table is not updating when selectedId property changes:
rowClassName={row => row.id === this.model.selectedId
? row.nameWithTypeAndRunType.type + " " + SELECTED_ROW_CSS_CLASS
: row.nameWithTypeAndRunType.type
}
i have an workaround, where i extract the table to a constant:
const MyTable = (viewModel: MyModel) => (
<Table<MyModel>
........
and add in render() with <MyTable {...this.myModel} />
I'd like to create a RTable, so that i could generally use the antd Table conveniently. I tried this:
export function RTable<RecordType extends object = any>(props: TableProps<RecordType>): JSX.Element {
const t = <Observer>{() => <Table {...props} />}</Observer>
return t
}
Than i use in render() RTable instead of Table tag , but no luck, table does not update.
Any ideas what to do in RTable function to force the update on Table?
Or any other idea how to solve this?

Answer 1

actually, the problem is that rowClassName is a function and mobx can only react to property changes.
So what we did is to pass the selectedId as property, so that mobx detects the change and rerenders the component:
export interface RTableProperties<RecordType extends object = any> extends TableProps<RecordType> {
selectedRecordId: string | undefined
}
export function RTable<RecordType extends object = any>(rTableProps: RTableProperties<RecordType>): JSX.Element {
const rTable = <Table {...rTableProps} />
return rTable
}