clauderic
using dnd-kit with tanstack table in expanded mode.
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 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> <TableHeader> {table.getHeaderGroups().map((headerGroup) => ( <TableRow key={headerGroup.id} > <TableCell></TableCell> {headerGroup.headers.map((header) => { return ( <TableHead key={header.id} {...header.column.getIsPinned()!=false ? {className:"sticky left-0 bg-muted z-10"} : null } style={{width: header.getSize() === Number.MAX_SAFE_INTEGER ? "auto" : header.getSize()}} > {header.isPlaceholder ? null : flexRender( header.column.columnDef.header, header.getContext() ) } </TableHead> ) })} </TableRow> ))} </TableHeader> <TableBody> <SortableContext items={items}> {table.getRowModel().rows?.length ? ( table.getRowModel().rows.map((row) => ( <DataTableRow key={row.id} row={row} rowDensity={rowDensity} /> )) ) : ( <TableRow> <TableCell colSpan={columns.length} className="h-24 text-center" > No results to show. </TableCell> </TableRow> )} </SortableContext> </TableBody> </Table> <DataTableRowOverlay> {activeItem ? ( <Table className="bg-background border"> <TableBody> <DataTableRow row={activeDragRow!} rowDensity={rowDensity} /> </TableBody> </Table> ) : null } </DataTableRowOverlay> </DndContext>
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.
@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 !
@Jwana24 the code snippet above was for a normal table, im yet to still get it to work with multiple containers,
Eventually I made a partially working example here: https://github.com/nickBes/react-table-dnd-tree/blob/main/src/components/Tree/SortableEmployeeTree.tsx
Hey @nickBes , I went through your code and its working as intended but I am working on angular and tanstack uses cdk for DnD feature in angular and no dnd kit.