bug with BS4 tab

[arcanisgk]

At the moment i am working in tha same scenario:

Example 1 Not Work

function Handler_RefreshTableInTabs() {
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function(event) {
        $($.fn.dataTable.tables(true)).DataTable().responsive.recalc();
        $($.fn.dataTable.tables(true)).css('width', '100%');
        $($.fn.dataTable.tables(true)).DataTable().columns.adjust().draw();
    });
}

Example 2 Not Work

function Handler_RefreshTableInTabs() {
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function(event) {
        $($.fn.dataTable.tables(true)).DataTable() 
        .responsive.recalc() 
        .columns.adjust();
    });
}

Example 3 Not Work

function Handler_RefreshTableInTabs() {
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function(event) {
        $($.fn.dataTable.tables({ visible: true, api: true })).DataTable() 
        .responsive.recalc() 
        .columns.adjust();
    });
}

LOG JS:

ajax.plug.js?20200413170242:806 Uncaught TypeError: Cannot read property 'recalc' of undefined
    at HTMLAnchorElement.<anonymous> (ajax.plug.js?20200413170242:806)
    at HTMLDocument.dispatch (jquery.min.js?20200413170242:2)
    at HTMLDocument.v.handle (jquery.min.js?20200413170242:2)
    at Object.trigger (jquery.min.js?20200413170242:2)
    at HTMLAnchorElement.<anonymous> (jquery.min.js?20200413170242:2)
    at Function.each (jquery.min.js?20200413170242:2)
    at S.fn.init.each (jquery.min.js?20200413170242:2)
    at S.fn.init.trigger (jquery.min.js?20200413170242:2)
    at l (tab.js:126)
    at i.t._transitionComplete (tab.js:209)
(anonymous) @   ajax.plug.js?20200413170242:806
dispatch    @   jquery.min.js?20200413170242:2
v.handle    @   jquery.min.js?20200413170242:2
trigger @   jquery.min.js?20200413170242:2
(anonymous) @   jquery.min.js?20200413170242:2
each    @   jquery.min.js?20200413170242:2
each    @   jquery.min.js?20200413170242:2
trigger @   jquery.min.js?20200413170242:2
l   @   bootstrap.min.js?20200413170242:6
t._transitionComplete   @   bootstrap.min.js?20200413170242:6
i   @   bootstrap.min.js?20200413170242:6
t._activate @   bootstrap.min.js?20200413170242:6
t.show  @   bootstrap.min.js?20200413170242:6
(anonymous) @   bootstrap.min.js?20200413170242:6
each    @   jquery.min.js?20200413170242:2
each    @   jquery.min.js?20200413170242:2
i._jQueryInterface  @   bootstrap.min.js?20200413170242:6
(anonymous) @   bootstrap.min.js?20200413170242:6
dispatch    @   jquery.min.js?20200413170242:2
v.handle    @   jquery.min.js?20200413170242:2

Display

How can i fill the tab entirely???

[arcanisgk]

Solution, the correct syntax is as follows:

function Handler_RefreshTableInTabs() {
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function(e) {
        e.stopPropagation();
        $.fn.dataTable.tables({
            visible: true,
            api: true
        }).columns.adjust();
    });
}