DataTables in bootstrap modal header width issue

Question

When I add scrollY to the datatables in a partial view, the headers are compacted into the left side of the screen. When I click the header to sort, they expand correct to 100%. Using the scroller option and scrolling down far enough also triggers the columns to be rendered correctly.

When looking at the width of each column header, the width is set to 0. After doing one of the above, the widths are then corrected as they should be.

Trigger from main view to load partial

$('a[data-target="#list-view-audits-modal"]').on('click', function (e) {
    e.preventDefault();
    $.ajax({
        type: "GET",
        url: "../Home/GetAudits",
        success: function (data) {
            $('body').append(data); //this adds the modal called below
            $('#list-audits-modal').modal('toggle')
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            WebUI.handleError(XMLHttpRequest, textStatus, errorThrown);
        }
    });
});

now in the partial view I call the following to transform the table

$(function () {
var dt = $('#table-audits-results').DataTable({
    order: [[0, "desc"]],
    buttons: ['csv'],
    scrollY: 200,
    scroller: true,
    responsive: true
    });
});

I have searched and have tried so many things I have found in other posts but so far nothing has resolved this issue. I assume this has something to do with it being transformed in a partial view?

Update 1

Ok so it seems this is an issue because the modal has no size yet. To test this, I put a delay in the trigger of transforming the datatables and the headers are now correct.

Now I need to figure out how to trigger this as soon as the modal has a size so the user does't see a standard table and watch it transform into the DataTables.

Update 2

I have tried the following but you still see the mass amount of data load before it's transformed

$(document).on('show.bs.modal', '#list-audits-modal', function () {
    alert('triggered');
    var dt = $('#table-audits-results').DataTable({
        order: [[0, "desc"]],
        buttons: ['csv'],
        scrollY: 200,
        scroller: true,
        responsive: true
    });
});

Update 3

I don't believe this is ideal as there is still a delay that the user sees the headers incorrect so still looking for a better solution

What i'm using in the partial view.

var dt = $('#table-audits-results').DataTable({
    order: [[0, "desc"]],
    dom: 'Bfrtip',
    buttons: ['csv'],
    scrollY: 200,
    scroller: true,
    responsive: true
});

$(document).on('shown.bs.modal', '#list-audits-modal', function () {
    dt.columns.adjust().draw();
});

Answer 1

$(document).on('shown.bs.modal', '#list-audits-modal', function () {
    dt.columns.adjust().draw();
});

Is Good But

 $(document).on('shown.bs.modal', '#list-audits-modal', function () {
        dt.columns.adjust();
    });

Would Also Be Fine

Since .draw() Would Send Another Request To Server If Server Processing Is Turned On