When using virtual rendering and column drag-and-drop sorting simultaneously, they don't work well together

[songchengen]

TanStack Table version

v8.19.3

Framework/Library version

React V18.3.1; @tanstack/react-virtual V3.8.3; @dnd-kit/core v6.1.0

Describe the bug and the steps to reproduce it

1. Slightly scroll the table body so that the scrollbar is not at the top.
2. Try dragging the icon in the table header cell to sort.
3. During the dragging process, slightly jiggle the mouse upwards. When you observe the scrollbar in the table body starting to scroll automatically, column sorting is no longer possible.
4. You can only continue to drag and sort after refreshing the page.

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://stackblitz.com/edit/tanstack-table-vpkdmn?file=src%2Fmain.tsx

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

No, because I do not know how

Terms & Code of Conduct

• [x] I agree to follow this project's Code of Conduct
• [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[xHeaven]

We are experiencing this exact same issue.

Our current workaround is setting the y to 0 on transform for both the header and the body so that none of them glitches upwards.

import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { Cell, flexRender } from '@tanstack/react-table';
import { cn } from '@/lib/shadcn-utils';

const DragAlongCell = ({ cell }: { cell: Cell<any, unknown> }) => {
  const { isDragging, setNodeRef, transform } = useSortable({
    id: cell.column.id
  });
  return (
    <div
      style={{
        transform: CSS.Translate.toString({ ...transform!, y: 0 }), // this is the "fix"
        width: `${cell?.column.getSize()}px`,
        minWidth: `${cell.column.columnDef.minSize}px`
      }}
      ref={setNodeRef}
      className={cn(
        'flex items-center relative transition-all transform duration-100 ease-linear py-1 px-3 text-sm w-full h-full',
        isDragging ? 'z-[1] opacity-80' : 'opacity-100'
      )}
    >
      <div className="w-full">{flexRender(cell.column.columnDef.cell, cell.getContext())}</div>
    </div>
  );
};

export default DragAlongCell;

[songchengen]

I solved it in the same way and will optimize it later. I hope to achieve the effect of ag-grid.

[jayvhaile]

I solved it in the same way and will optimize it later. I hope to achieve the effect of ag-grid.

Could you please share the fix?, experiencing the same problem, i tried setting the y to 0 on transform but still same...