How to use tree data in antd nested tables?

Question

I'm trying to put tree data in antd nested tables，but it always renders empty rows when I clicked the expand button.

Can I use tree data in nested tables and how?And why it happened?

code is here

Answer 1

There seems to be two problems here.

1. children property will always render its data source in the same table set with parent. You seems to want to render some expandable data which depends on the children property, so the table set will render both the expanded table defined by you and the children data source.

2. You have not prevented node expansion which are doesn't contain children. Before defining the rowexpandable handler, all nodes are expandable by default whether their children is empty or not.

My solution is to rename the children property to prevent children data source rendering and to define a rowexpandable handler to prevent empty children to be expanded.

expamle:

https://codesandbox.io/s/qiantaozibiaoge-antd4102-forked-6b0x4?file=/index.js:2194-2207