clauderic / clauderic/dnd-kit

useSortable: dragged table row/column is offset when border-spacing is set

Open
#2,128 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.