可排序和可编辑的Ant设计表

Question

I'm trying to create an Ant.Design table which is both sortable and editable. The Ant.Design docs show sample code of both ( here and here ). I tried to combine these in a minimal code repository here: https://github.com/Silox/Ant-Design--EditableSortableTable .

The main problem is that the table gets reordered while editing a value and I haven't found a way to prevent this. The behaviour I am looking for is that when a user edits a cell, the ordering is put "on hold", and when the user is done editing, the table is resorted. Would anyone have any idea to accomplish this?

Answer 1

How about this:

• Add a boolean state editing to EditableSortableTable .

• Set it in setEditable/setNotEditable to isEditableMap.length > 0 .

• for EditableSortableTable add:

shouldComponentUpdate(nextProps, nextState) { return !(nextState.editing && this.state.editing) }

[update] Given the requirement to not use shouldComponentUpdate() you can introduce a new _sortTitle prop on the table objects and sort the rows based on this prop. This prop is not rendered, but is set to title when mounting, and then updated only once edit of a title cell is complete.