I am trying to make a tree table reorderable via drag and drop.

Here's the render for easier visualization:

I am also using React-DnD.

Here's a piece of my code:

const moveRow = useCallback(
  (record: StructureElement) => (dragIndex, hoverIndex) => {
    // console.log(record.name, dragIndex, hoverIndex);
    const dragRow = sortableData[dragIndex];
    if (!dragRow) {
      console.log(sortableData, dragIndex);
    } else {
      console.log('drag', dragRow.name, 'hover', sortableData[hoverIndex].name);
    }
    // todo - change the order in array
  },
  [sortableData],
);

<StyledTreeTable
  components={components}
  dataSource={sortableData}
  onRow={(record, index) => {
    return {
      index,
      moveRow: moveRow(record as StructureElement),
    };
  }}
/>

So the problem is, my sortableData looks like this:

[
  { name: 1 },
  { name: 2 },
  {
    name: 3,
    children: [
      { name: 11 },
      { name: 22 },
      { name: 33, children: [{ name: 111 }, { name: 222 }, { name: 333 }] },
    ],
  },
];

So my objects can have more objects nested in children.

But moveRow function doesn't see it this way. For it, ABSTRACT_STATE_4 is of index 4. So when I try to reorder the array, I try to do this: data[4], which results in undefined.

Is there a way I can reorder the items in tree table with drag and drop, that I haven't found yet?

The only way I see of solving it now, is to recreate the array the way hover and drag indexes match. But that's a lot of seemingly unnecessary work.

Is there a way to get the record I am hovering over, like I'm getting hoverIndex?