Bootstrap tabs + rowGroup + own summary render not working after column.adjust()

Hi,

I have bootstrap tabs where every tab view has own datatables. When I go (load) first time page and first tab show everything goes great. I have own group render line where is three td fields. This time it show colspan=1 there. After I change tab or I change my reasolution everything going bad. It put somehow there colspan=3 automaticly and I dont know how to fix that? Is this somekind of bug on library or what I do wrong?

Here is one datatable example:

`$('#tblsummarywithsoutharea').DataTable( {
language: {
"sProcessing": "{{ __('datatable.sProcessing') }}",
"sLengthMenu": "{{ __('datatable.sLengthMenu') }}",
"sZeroRecords": "{{ __('datatable.sZeroRecords') }}",
"sInfo": "{{ __('datatable.sInfo') }}",
"sInfoEmpty": "{{ __('datatable.sInfoEmpty') }}",
"sInfoFiltered": "{{ __('datatable.sInfoFiltered') }}",
"sInfoPostFix": "",
"sSearch": "{{ __('datatable.sSearch') }}",
"sUrl": "",
"oPaginate": {
"sFirst": "{{ __('datatable.sFirst') }}",
"sPrevious": "{{ __('datatable.sPrevious') }}",
"sNext": "{{ __('datatable.sNext') }}",
"sLast": "{{ __('datatable.sLast') }}"
}
},
ajax: "/registrationsummaryonjson/1?mgid=2&sgid=3",
idSrc: 'groupid' + 'agegroupid',

        columns: [
            { data: "maingroupname" },
            { data: "secondgroupname" },
            { data: "thirdgroupname" },
            { data: "gendername"},
            { data: "visible_order"},
            { data: "agegroupname", className: "dt-group-level-2" },
            { data: "countsum" },
            {
                data: null,
                className: "dt-body-center",
                render: function (data, type, row) {
                    var reglisticon = '<a href="/regnamelistbygroup/2?mgid=' + data.maingroupid + '&sgid=' + data.secondgroupid + '&tgid=' + data.thirdgroupid + '&agid=' + data.agegroupid + '" data-toggle="tooltip" title="{{__("registrations.Player list")}}"><i class="fa fa-address-card fa-lg green-icon"></i></a>';
                    if (data.teamscount > 0) {
                        var createteamicon = '';
                    } else {
                        var createteamicon =    '<a href="" id="createteam" data-groupid="' + data.groupid + '" ' +
                            'data-maingroupname="' + data.maingroupname + '" ' +
                            'data-secondgroupname="' + data.secondgroupname + '" ' +
                            'data-thirdgroupname="' + data.thirdgroupname + '" ' +
                            'data-agegroupname="' + data.agegroupname +'" ' +
                            'data-agegroupid="' + data.agegroupid +'" ' +
                            'data-tableid="#tblsummarywithsoutharea" data-toggle="tooltip" title="{{__("registrations.Create team")}}"><i class="far fa-plus-square fa-lg green-icon" style="margin-left: 10px;"></i></a>';

                    }
                    return reglisticon + createteamicon;
                }
            }
        ],

        columnDefs: [
            { visible: false, targets: [ 0,1,2,3,4 ] },
            { orderable: false, targets: [ 5,6,7 ] }
        ],
        order: [
            [ 0, 'asc'], [ 1, 'asc' ], [ 2, 'asc' ], [ 3, 'asc' ], [ 4, 'asc' ]
        ],
        rowGroup: {
            //startRender: null,
            endRender: function(rows, group) {
                var total = rows
                    .data()
                    .pluck("countsum")
                    .reduce( function(a,b) {
                        return a + b*1;
                    }, 0);

                return $('<tr/>')
                    .append('<td>' + group + ' yhteensä</td>')
                    .append('<td class="normalpaddingleft">' + total + '</td>')
                    .append('<td></td>');
            },
            dataSrc: [ 'secondgroupname', 'thirdgroupname', 'gendername' ],
            emptyDataGroup: '-'
        },

        //scrollCollapse: true,
        //scrollX: true,
        responsive: true,
        paging: false,
    } );`

Here is my tab change function:
$(document).on('show.bs.tab', 'a[data-toggle="pill"]', function(e) { $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust(); });