LearnNewsExamplesServices
Frontmatter
id9528
titleReal-time cell resizing during grid column drag:move
stateClosed
labels
enhancementaigrid
assigneestobiu
createdAtMar 20, 2026, 2:20 PM
updatedAtMar 20, 2026, 5:35 PM
githubUrlhttps://github.com/neomjs/neo/issues/9528
authortobiu
commentsCount2
parentIssuenull
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[x] 9529 Add lightweight cell resizing method to grid.Body
blocking[]
closedAtMar 20, 2026, 5:33 PM

Real-time cell resizing during grid column drag:move

Closed v12.1.0 enhancementaigrid
tobiu
tobiu commented on Mar 20, 2026, 2:20 PM

Description

Currently, grid column resizing updates the header visually during drag:move, but the grid body cells only synchronize their widths upon drag:end (drop). To provide a more cohesive and native-feeling user experience, the grid body cells should dynamically resize in real-time as the header resize handle is dragged.

Context

  • The grid utilizes highly optimized virtualized rows (src/grid/Body.mjs, src/grid/Row.mjs).
  • Modifying cell widths dynamically is achievable without massive performance penalties due to row and column buffering.
  • Sorting columns via drag & drop already handles real-time visual updates, proving the architecture can support this (src/draggable/grid/header/toolbar/SortZone.mjs).

Goal

  • Enhance src/grid/header/plugin/Resizable.mjs to trigger a width synchronization to the grid body on drag:move.
  • Ensure the synchronization method updates the columnPositions cache in the grid body and applies the necessary style deltas directly to the active VDOM nodes to prevent full re-renders on every pixel move.
  • Potentially investigate whether throttling or debouncing the drag:move events is necessary to maintain smooth 60fps performance during complex resizing.
tobiu added the enhancement label on Mar 20, 2026, 2:20 PM
tobiu added the ai label on Mar 20, 2026, 2:20 PM
tobiu added the grid label on Mar 20, 2026, 2:20 PM
tobiu assigned to @tobiu on Mar 20, 2026, 2:21 PM
tobiu cross-referenced by #9529 on Mar 20, 2026, 5:21 PM
tobiu marked this issue as being blocked by #9529 on Mar 20, 2026, 5:23 PM
tobiu
tobiu Mar 20, 2026, 5:33 PM

Input from Gemini 3.1 Pro:

✦ The real-time cell resizing during grid column drag:move has been successfully implemented.

This was achieved by introducing a new, lightweight updateCellPositions method in src/grid/Body.mjs (handled in prerequisite ticket #9529) and hooking it into the onDragMove event of src/grid/header/plugin/Resizable.mjs.

By utilizing updateDepth: 2 and directly mutating the VDOM and JS cache in memory, we bypass the expensive createViewData() row-render cycle, allowing the grid body cells to seamlessly and performantly match the header width in real-time. The final drag:end event remains untouched to ensure flex columns and viewport buffers are cleanly recalculated via passSizeToBody().

Closing this ticket as completed.

tobiu closed this issue on Mar 20, 2026, 5:33 PM