1

There is library written in vanilla js for datatable Vanilla-Datatables, I am trying to use that library to create datatables.

HTML:

<template>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-block" lwc:dom="manual">

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

JS :

renderedCallback() {
    Promise.all([
        loadScript(this, FrameworkBase_CF + '/js/VanillaDataTables/vanilla-dataTables.js'),
        loadStyle(this, FrameworkBase_CF + '/css/VanillaDataTables/vanilla-dataTables.min.css')
    ]).then(() => {
        var createTable = this.template.querySelector('.card-block');
        createTable.innerHTML= '<table class="customlwctable"></table>';
        var myTable = this.template.querySelector('.customlwctable');
        var dataTable = new DataTable(myTable);

    }).catch(error => {
        this.error = error;
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Error!!',
                message: error.message,
                variant: 'error',
            }),
        );
    });
}

But it throws: Uncaught TypeError: Failed to execute 'add' on 'HTMLSelectElement': The provided value is not of type '(HTMLOptionElement or HTMLOptGroupElement)'.

I debugged the library and found out that specific code which throws error is this line :

var select = createElement("select", {
    class: "dataTable-selector"
});

// Create the options
each(o.perPageSelect, function (val) {
    var selected = val === o.perPage;
    var option = new Option(val, val, selected, selected);
    select.add(option); // Problem Creator
});

I believe this is because option is a SecureElement and it is expecting HTMLOptionElement or HTMLOptGroupElement. But the issue is I have added directive lwc:dom="manual", but still this issue comes up, Is there any way to extract HTMLOptionElement from the secureelement ?

  • If you could, it would not be "secure". :-) The operative definition of "secure" in this case being "secured against working like you want it to." – kamezaburo Jan 8 at 18:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.