Open songchengen opened 1 month ago
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;
I solved it in the same way and will optimize it later. I hope to achieve the effect of ag-grid.
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...
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
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