useSortable: dragged table row/column is offset when border-spacing is set
- Dominant language
- TypeScript
- Stars
- 17.6k
- Forks
- 924
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 2
Description
## Description
When using `useSortable` on `` / `` elements inside a `` with `border-collapse: separate` and a non-zero `border-spacing`, the dragged element is visually offset by roughly the `border-spacing` amount during the drag.
Setting `border-spacing: 0` removes the offset.
This looks related to how the drag feedback positioning / geometry is calculated for table layout — similar in spirit to margin-related positioning issues (e.g. #2092), but specific to CSS `border-spacing` on tables.
## Reproduction
1. Open the sandbox: https://codesandbox.io/p/sandbox/dnd-kit-bug-border-spacing-qcmq2k
2. Drag a **row** (via the handle) or a **column** header.
3. Observe that the dragged element is shifted by the `border-spacing` amount (12px in the demo).
4. Change `borderSpacing` to `0` in `tableStyles` — the offset no longer occurs.
## Expected behavior
The dragged row/column should stay aligned under the pointer / original position, regardless of `border-spacing`.
## Actual behavior
The dragged element is offset by approximately the table’s `border-spacing` value for the duration of the drag.
## Environment
- `@dnd-kit/react`: `0.5.0`
- `@dnd-kit/helpers`: `0.5.0`
- React: `18.2.0`
- Browser: (fill in — e.g. Chrome 139 / macOS)
## Minimal CSS that triggers the bug
```css
table {
border-collapse: separate;
border-spacing: 12px; /* non-zero triggers the offset */
}
```
## Workaround
Avoid `border-spacing` and simulate the gap with transparent borders on cells instead (keep `border-spacing: 0`):
```css
table {
border-collapse: separate;
border-spacing: 0;
}
tr > td {
background-clip: padding-box;
border-top: 12px solid transparent;
}
```
This preserves visual spacing between rows without triggering the drag offset.
## Notes
- Reproduced with both row sorting (`` + `handleRef`) and column sorting (``).
- Based on the docs Table example; the only meaningful change for the bug is non-zero `border-spacing`.
Contributor guide
Research direction
Start by reproducing the offset in the linked CodeSandbox, then trace the useSortable drag feedback positioning and geometry behavior for the docs Table example. Compare row and column sorting with border-spacing set to 12px and 0px. Done means both dragged rows and columns remain aligned under the pointer with non-zero border-spacing, without regressing the existing workaround cases.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100