Can't get Select initialized

RupertBarrow

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
I'm using Datatables in a Lightning Web Component, off Salesforce platform, in a Node application.
I'm using npm JS module "datatables.net-select-bs5", and CSS from https://cdn.datatables.net/select/1.6.0/css/select.dataTables.min.css

My table is simply initialized :
this.oDataTable = $(table).DataTable({
data: [],
columns: this.columns,
select: true,
})
I add data later, dynamically, which works well.

But I can't get Select to initialize : I cannot select rows in the table.
I tried
this.oDataTable.select()
without success.

How can I check (by API) whether Select is correctly initialized ?
Is there a special initialization action for use within a Node application ?

Thanks for any help,
Rupert

RupertBarrow

PS : is there an npm module for DT_Debug ?

allan

What you've got there should be enough. If it isn't working, can you link to a test case showing the issue so I can see what is going wrong?

PS : is there an npm module for DT_Debug ?

No. I'm not sure what it would do really? It was designed as a bookmarklet.

Allan

edit You could try calling row().select() and check that operates. If it doesn't, Select hasn't been loaded.

RupertBarrow

Ah, great ! I’ll try that

RupertBarrow

I'm working on this.
During my exploration, I found this issue https://github.com/DataTables/Dist-DataTables-Bootstrap5/issues/5

RupertBarrow

Hi @allan,
I've prepared a public repository to reproduce this issue :
https://github.com/RupertBarrow/lwc-oss-datatable

It's all described in the ReadMe.
Bottom line : the select call via Api works (great !), but manual selection does not. This is probably due to event management and propagation, possibly inteferred with by the LWC shadow/light DOM stuff.

Tell me what you think.

RupertBarrow

@allan , is there a way of knowing if the Datatable is receiving mouse-clicks when I try to select ?

allan

This is the weirdest thing I've ever encountered!

Here is the output from my console with a break point where you initialise the DataTable

> jQuery('div.col-sm-12').eq(2).children('table')
< Object { 0: table#DataTables_Table_0.tableCls.slds-table.slds-table_cell-buffer.slds-table_bordered.dataTable.no-footer
, length: 1, prevObject: {…} }

Awesome - so the table is there. But:

> jQuery('table')
< Object { length: 0, prevObject: {…} }

jQuery can't select it.

> document.querySelectorAll('table')
< Object {  }

Neither can QSA.

That is just about the weirdest thing I've ever seen! Still digging into it.

Allan

allan

QSA picks up the child elements though! It has to be something to do with lwc:dom="manual", but I don't know anything about this framework.

If I change the template for baseTable to be:

<template>
  <div lwc:dom="manual"></div>
</template>

And then the JS to have:

    // Table
    let container = this.template.querySelector("div")
    let table = $('<table lwc:dom="manual" class="tableCls slds-table slds-table_cell-buffer slds-table_bordered" style="width: 100%"></table>');

    table.appendTo(container);

    this.oDataTable = $(table).DataTable({
       ...

Then Select works as expected.

Lightning must be doing something to the element that is stopping DOM selectors from picking it up, and that is causing the issue. This is something for the Lightning dev team. I would guess it is expected behaviour, but it is causing issues to external libraries such as DataTables here.

Allan

RupertBarrow

Thanks @allan !
As mentioned in my test, this is most certainly due to the way LWC (Lightning Web Component) interferes with the DOM.

Regarding jQuery : please note that I load jQuery in the context of the baseTable component, so it is not available globally.

RupertBarrow

Wow, thanks for that workaround, I will take a look straight away !

RupertBarrow

Thank you SO much for this help, it's working great.

allan

Awesome - great to hear that did the job

Allan