I have a project in asp.net core,in which I load a product in a new/edit product view,in the model I have a collection/list of products that i called "Surtidos", page has multiple tabs that are rendered from components. My issue is, on page load I call a function that check that Surtidos.lenght>0 and if this is true I render a this data into a datatable when i go to the "Surtidos" tab where table "Surtidos" will be viewed, I had two headers, and only when i click on the first header the other one dissapears and header align correctly. I only face this issue is i render data in table from model if i do it from an API or URL this is not happening. I have tried many codes that i found but no one success.After Click Before Click

This is the code for the table rendering.

 if ($.fn.DataTable.isDataTable(tSurtidos))
            $(tSurtidos).DataTable().clear().destroy();
        table = $("#tSurtidos").DataTable(
            {
                destroy: true,
                paging: false,
                scrollCollapse: true,
                scrollY: '50vh',
                scrollX: false,
                select: "single",
                autoWidth: false,
                fixedHeader: {
                    header: true,
                    headerOffset: 120
                },
                data:data,
                columns:
                    [
                        {
                            title: "Codigo", data: "codigo", width: '10%',
                        },
                        {
                            title: "Descripcion", data: "descripcion", width: '35%',
                        },
                        {
                            title: "Unidad Medida",data: "unidadMedida.descripcion", width: '15%',
                        },
                        {
                            title: "Cantidad", data: null, width: '15%',
                            render: function (data, type, linea) {
                                return data.cantidadDigitada;
                            }
                        },
                        {
                            data: null, width: '10%',
                            render: function (data, type, linea) {
                                return "";
                            }
                        }],
                "order": [[1, 'asc']],
                fnDrawCallback: function () {
                    $("#tSurtidos thead").remove();
                },
                columnDefs: [
                    { width: "20%", targets: "0" }
                ]
            });


This code is called after rendering table looking to the headers and column to adjust (but is not working)

    function reloadTable(table) {
        var table = $("#" + table + "").DataTable();
        table.columns.adjust().responsive.recalc();
        return;
    }

Any case will appreciate all the help since is being a long time fighting with this issue and many types of codes and solutions from web that I have tried.