Implementing Drag-and-Drop with Virtualized Rows

[Alexisvib]

Hi,

I worked on a react environnement

I find examples of table virtualization with tanstack react-table as well as examples of virtualization.

However, I am unable to implement both at the same time: specifically, to obtain a virtualized table where the rows can be drag-and-dropped by combining @dnd-kit and '@tanstack/react-virtual'.

In my case, I only have 6 columns, but I have cases with 1000 rows, and drag-and-drop becomes very slow, leading to performance issues. This is why I would like to have a virtualized version of the table for performance gains. However, when trying to implement the example provided on the site, I was not able to properly combine drag-and-drop and virtualization, and I am stuck on this issue.

Does anyone have a gist or a code sandbox of a functional example of this type?

[KevinVandy]

Can you list the exact issues and conflicts you ran into?

[Alexisvib]

My issue is the following.

In the official example given, we have the following for virtualized-rows

                <tr
                  data-index={virtualRow.index} //needed for dynamic row height measurement
                  ref={node => rowVirtualizer.measureElement(node)} //measure dynamic row height
                  key={row.id}
                  style={{
                    display: 'flex',
                    position: 'absolute',
                    transform: `translateY(${virtualRow.start}px)`, //this should always be a `style` as it changes on scroll
                    width: '100%',
                  }}
                >

For the drag n drop we have the following :

const DraggableRow = ({ row }: { row: Row<Person> }) => {
  const { transform, transition, setNodeRef, isDragging } = useSortable({
    id: row.original.userId,
  })

  const style: CSSProperties = {
    transform: CSS.Transform.toString(transform), //let dnd-kit do its thing
    transition: transition,
    opacity: isDragging ? 0.8 : 1,
    zIndex: isDragging ? 1 : 0,
    position: 'relative',
  }
  return (
    // connect row ref to dnd-kit, apply important styles
    <tr ref={setNodeRef} style={style}>
      {row.getVisibleCells().map(cell => (
        <td key={cell.id} style={{ width: cell.column.getSize() }}>
          {flexRender(cell.column.columnDef.cell, cell.getContext())}
        </td>
      ))}
    </tr>
  )
}

My issue is that the <tr> should share 2 style with a transform :

transform: `translateY(${virtualRow.start}px)`, //this should always be a `style` as it changes on scroll

and

    transform: CSS.Transform.toString(transform), //let dnd-kit do its thing
    transition: transition,

So I don't know how to handle this mix, if i just let transform: `translateY(${virtualRow.start}px)` , my rows appears in the right place, but we do not see the drag n drop element (or animation).

If i combine the 2 transformations, all the rows are mixed at the top of the table.

[songchengen]

Hello, I also encountered issues with drag-and-drop and virtual rows, but my problem occurs when dragging to sort columns.
#5689

[klugeradoslaw]

Did you deal with it? :)