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 Smith
Posts: 5Questions: 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
Hi,
Could you post a link to a test case showing the error please? The example here appears to be working okay.
Regards,
Allan
Not sure the best way as my reproduce case is an internal app. As I mentioned it only breaks when you do 2 row column headers and the example only does 1
Changing that example to this should trigger the drag issue:
new DataTable('#example', {
columnControl: [{target: 0, content: ['order']}, {target: 1, content: ['search']}]
});
https://live.datatables.net/vaheriva/1/edit
I've added
colReorder: true, rather than putting it in a button. Is that how you have it?It doesn't seem to include the title text, or perhaps the colour is wrong, but there are no errors thrown. Are you able to modify that example to demonstrate the issue?
Allan
I do have a similar although not exact issue using both extensions with a console error of:
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.It can be seen here: https://live.datatables.net/buyatime/1/edit?js,console,output
Excellent - many thanks for the test case! I can see the error and what it is, but not yet why it is entering that state. I'll look into it further shortly and get back to you with a fix.
Allan
I set colReorder: true directly in the options instead of placing it inside a button layout—is that how yours is configured?
The headers don't seem to include the title text (or the font color might be blending into the background), but no errors are being thrown in the console. Could you update the code example to reproduce this issue?
Alternative options depending on your context:
More Direct:
I configured colReorder: true in the main options rather than inside a button. Is that how yours is set up? The title text isn't displaying properly (or it might just be a color contrast issue), but there are no console errors. Could you adjust your example to reproduce this?
Concise:
I added colReorder: true directly to the options instead of inside a button. Is yours set up the same way? The header titles are missing or unreadable due to color, but no errors are thrown. Can you update the example to show this behavior?
I've committed a fix, which is now in the nightly build and the example works now.
The issue was that ColumnControl was attempting to reposition a dropdown which wasn't visible with that configuration. A simple check resolves the issue.
Allan
Awesome, thank you for the quick resolution! Not sure if that helps OP's problem but I appreciate it.
So I did find my issue - it's related to my own javascript (ah stimulus you annoying thing) but also to the fact that there's no standardized way for javascript to tell if a table is a transitory clone of an existing datatable or not
for fixedHeader I'm using aria-hidden="true"
for colReorder I had to add class has dtcr-cloned
It might be smart to have a SINGLE class (datatable-clone) or something that is always applied to cloned tables (would make life a lot easier
Thanks! Sorry for the bad Issue
Yup, good idea. I've added it to the list :-).
Good to hear you've got it working now.
Allan