TableHeader issue (IE11) when Table hidden

sebros

Hi everyone,
I use this plugin to create standalone webcomponents. I have a big problem with the table.

If the table on page start is hidden and I switch to tab where I have the table, the table headers are not displayed correctly. (for example, when I use tabs) I've tried a lot of things, suggestions from people here in the forum. But I didn't go any further. Can someone help me please.

Greetings Sebastian

Important Information I use IE11

import $ from 'jquery';
let dt = require('datatables.net');

class MyTable extends HTMLTableElement {
    constructor(){
        super();
    }
    connectedCallback() {
        const myTable = this;
        const tableId = myTable.getAttribute('id');

        const datatableConfig = {
            dom: '<""ipf>t<"bottom"><"clear">',
            searching: true,
            pagingType: 'full',
            scrollX: '100%',
            scrollCollapse: false, 
            scroller: true,
            ordering: true,
            select: false,
            info: true,
            lengthChange: true,
            autoWidth: true,
            pageLength: 10, 
            retrieve: false, 
            deferRender: true, 

            language: {

                paginate: {
                  first: '«',
                  previous: '‹',
                  next: '›',
                  last: '»',
                },
    
                info: '_PAGE_ von _PAGES_',
              },
              infoCallback(settings, start, end, max, total, pre) {
    
                const scrollBodyDiv = document.getElementById(tableId).parentElement;
                const dtScroll = scrollBodyDiv.parentElement;
                const dtPaginate = (dtScroll.parentElement.childNodes[0]).childNodes[1];
                const paginateButtonPrevious = dtPaginate.childNodes[1];
                const paginateButtonLast = dtPaginate.childNodes[3];
    
                if ($(paginateButtonPrevious).length > 0) {
                  $(paginateButtonPrevious).after("<span class='paginate_info'>" + pre + '</span>');
                  $(paginateButtonLast).after(dtPaginate.appendChild(prefChild));
                } else {
                  $(paginateButtonPrevious).after("<span class='paginate_info'>" + pre + '</span>');
                  $(paginateButtonLast).after(dtPaginate.appendChild(prefChild));
                }
    
                return '';
              },
        };
        
        let table = null;

        if ($.fn.dataTable.isDataTable('#'.concat(tableId))) {
            table = $('#'.concat(tableId)).DataTable();
        } else {
            table = $('#'.concat(tableId)).DataTable(datatableConfig);
        }

        const dataTablesScrollHeadInner = document.getElementById(tableId).parentElement.parentElement.parentElement.childNodes[1].childNodes[0].childNodes[0];
        $(dataTablesScrollHeadInner).css('width', '100%');
        $(dataTablesScrollHeadInner.childNodes[0]).css('width', '100%');

        $(window).resize(function () {
            $('#'.concat(tableId)).DataTable().columns.adjust().draw();
            const dataTablesScrollHeadInner = document.getElementById(tableId).parentElement.parentElement.parentElement.childNodes[1].childNodes[0].childNodes[0];
            $(dataTablesScrollHeadInner).css('width', '100%');
            $(dataTablesScrollHeadInner.childNodes[0]).css('width', '100%');
        });
    }
}
window.customElements.define('my-table', MyTable, {extends:'table'})

And on html Example

<table id="myDatatable" style="width:100%;" is="my-table" class="display" cellspacing="0"> ...