Ajax.reload overrides column visibility?

I have a table which sits hidden away in a modal dialog, how ever i dont want data drawn on it yet, because data which appears in it is depended on other things, so i only want the table to load data when the modal appears, for this reason, i have set deferLoading: true.

because it is only a small dialog, i have hidden the ID column as it is not required, but i do require the ID of the record selected.

There is not problems with the table set up, as you can see the first column is hidden before the data is loaded, it is after i call the ajax.reload function, the ID column appears again.

Sorry i do not have a jsfiddle for this one as i was having troubles loading direct json data from a variable in javascript.

EAPTable = $("#EAPSelectTbl").DataTable({
        ajax: {
            "url": base_url+'Builder/listEAPFromCat',
            "data": function(d){
                d.id=$("select#EAPCategorySelect option:selected").val();
            }
        },
        searching: false,
        responsive: true,
        serverSide: true,
        "columns" : [
            { "data" : "providerid",
              "visible": false },
            { "data" : "name" },
            { "data" : "note" }
        ],
        deferLoading: true
    });

$("button[name='new-builder-eap-btn']").on('click', function(){
        
        EAPTable.ajax.reload();
        $("#select-eap-modal").modal('show');
    });

The table is prepared when the page loads, (this is fine, only name and note visible) when the button is clicked, the table is loaded based on the selected option in the select element, and modal appears. and the ID field appears again.