ColReorder + ColumnControl: dragging a column throws "cell of undefined" and shows wrong drag-ghost

ColReorder + ColumnControl: dragging a column throws "cell of undefined" and shows wrong drag-ghost

Elizabeth M SmithElizabeth M Smith Posts: 3Questions: 0Answers: 0

Setup: Both ColumnControl and ColReorder enabled on the same table, with ColumnControl configured to add a second header row (e.g. columnControl: [{target: 0, content: ['order']}, {target: 1, content: ['search']}] — a per-column search-box row, distinct from the order controls in the title row).

What happens: Dragging a column header to reorder it throws mid-drag:

Uncaught (in promise) TypeError: can't access property "cell", n[l][r] is undefined
and the drag-ghost element shows the wrong column name (consistently shows the first/frozen column's label regardless of which column is actually being dragged). The reorder itself still completes correctly despite the error — cosmetic/console-noise, not a functional break.

What isolates it: Removing ColumnControl's extension entirely (keeping ColReorder alone) makes the error disappear completely. So it's specifically the combination, and specifically the second header row.

Suspected mechanism, traced from source: _addListener()'s listener-attachment loop (dataTables.colReorder.js) correctly scopes itself to this.c.headerRows (if (!headerRows || headerRows.includes(rowIdx))), so an unconfigured/restricted row correctly never gets a drag-start listener. But validateStructureMove() (called via moveAllowed() during an active, validly-started drag) reads table.table().header.structure() completely unfiltered by headerRows — so even a drag that legitimately starts on row 0 still runs structural validation against the entire multi-row header, including ColumnControl's injected row, which appears to produce a gap/misalignment in the structure matrix that a downstream .cell access doesn't guard against.

Suggested fix: Have validateStructureMove()'s structure read respect this.c.headerRows the same way _addListener()'s attachment loop already does — filter the header/footer structure to the configured rows before validating, rather than reading it unfiltered.

Replies

  • allanallan Posts: 65,923Questions: 1Answers: 10,971 Site admin

    Hi,

    Could you post a link to a test case showing the error please? The example here appears to be working okay.

    Regards,
    Allan

Sign In or Register to comment.