using dnd-kit with tanstack table in expanded mode.

[step2341]

I've been attempting to utilize dnd-kit within tanstack table v8. For a standard table (no nested rows) it worked wonderfully and looks very good!

Tanstack has an expanded row model which allows for construction of a treegrid. Using the sortable-tree example I've been able to implement the drag and drop functionality most of the way, except for an odd issue where the dropAnimationConfig only works for level 0.

Are there any things anyone would recommend checking to resolve?

[SirajKakeh]

hey mind sharing a link how that looks in standard table?

[step2341]

@SirajKakeh sure, for a standard table the structure is like this (not too much different than the sortable list start template example https://codesandbox.io/s/dnd-kit-sortable-starter-template-22x1ix)

within the root table, component you can use a dnd context similar to this:

<DndContext id={dndContextId} sensors={sensors} onDragStart={({ active }) => { setActive(active); }} onDragEnd={({ active, over }) => { if (over && active.id !== over?.id) { const activeIndex = items.findIndex(({ id }) => id === active.id); const overIndex = items.findIndex(({ id }) => id === over.id); setData(arrayMove(data, activeIndex, overIndex)); } setActive(null); }} onDragCancel={() => { setActive(null); }}

{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => { return ( ) })} ))} {table.getRowModel().rows?.length ? ( table.getRowModel().rows.map((row) => ( )) ) : ( )} {activeItem ? ( ) : null }

then within the tablerow component itself include the listeners etc.

the tree is alot tricker, as need to keep track of the projected depth etc.

[Jwana24]

@step2341 I'm actually trying to make a dnd exactly like yours, but I don't find anything about that in the documentation, I was forced to do all the logic by hand. Have you any idea how to do that today ? Thank by advance for your answer !

[step2341]

@Jwana24 the code snippet above was for a normal table, im yet to still get it to work with multiple containers,