Bug using plugin datatables.net-colreorder-bs4

[juliorosseti]

I realized that when trying to change the column positions the error below appears:
Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.

I looked for the bug in the Datatables community and found this discussion:
https://datatables.net/forums/discussion/59248/colreorder-failed-to-execute-insertbefore-on-node-parameter-1-is-not-of-type-node

Then I realized that there are actually two "tr" in the code generated by the component:

When I remove the void "tr", the error no longer happens.

I used this code below in the function @table-created="doCreated"

doCreated(comp) {
        this.$refs.table.$el
                .querySelector(".dataTables_scrollHead table thead tr")
                .remove()
}

BTW, thanks for developing this Vue wrapper component. Works great!

[noogen]

I notice the extra empty row in the thead too. Seem to be bug in the datatables.net code when you define your own thead, which I feel iffy about patching within this component. Since this component is defining a thead, I will keep this issue open while I ponder more on if I should patch it here or report back to the datatables.net author?

The patch should be something like:

const rows = this.$refs.table.$el.querySelector(".dataTables_wrapper table thead tr")

// loop through and remove all empty thead rows?
// or blindly remove first row like so
if (rows.length > 1) {
   rows[0].parentNode.removeChild( rows[0] )
}

[juliorosseti]

Your example just got a lot better, tks!

I did a test with the code above, but it only worked by changing querySelector to querySelectorAll

[vibonacci]

Quite annoying. I noticed it as well at some point using datatables.net iwthout this Vue wrapper. Of course should report to datatables.net author.

[noogen]

Stale issue.