create_table = function(tableId, tableData, columnDefs, customSettings) {

    loadDataTable(tableId=tableId, tableData=tableData, customSettings, firstRun=true)

    var widthChange = 0; // For storing the change in width so overall table width can be adjusted by that amount
    function loadDataTable(tableId, tableData, customSettings, firstRun=false){
        if (!firstRun){
            columnDefs = setUserColumnsDefWidths(tableId, columnDefs);
        }

        tableSettings = {
            'data': tableData,
            'columns': columnDefs,
            "sDom": "iti",
            "destroy": true,
            "autoWidth": false,
            "bSortClasses": false,
            "scrollY": "100vh",
            "scrollCollapse": true,
            "scroller":  true,
            "iDisplayLength": -1,
            "initComplete": function (settings) {
                // Add JQueryUI resizable functionality to each th in the ScrollHead table
                $('#' + tableId + '_wrapper .dataTables_scrollHead thead th').resizable({
                    handles: "e",
                    alsoResize: '#' + tableId + '_wrapper .dataTables_scrollHead table', //Not essential but makes the resizing smoother
                    resize: function( event, ui ) {
                        widthChange = ui.size.width - ui.originalSize.width;
                    },
                    stop: function () {
                        saveColumnSettings(tableId, theTable);
                        loadDataTable(tableId, tableData, customSettings, firstRun=false);
                    }
                });
            }
        }

        // Replace default settings with custom settings or add custom settings if not already set in default settings
        $.each(customSettings, function(key, value) {
            tableSettings[key] = value
        });

        if (!firstRun){
            $('#' + tableId + '_container').css("width", String($('#' + tableId).width() + widthChange + 17) + "px"); // Change the container width by the change in width of the adjusted column, so the overall table size adjusts properly

            let checkedRows = getCheckedRows(tableId);
            theTable = $('#' + tableId).DataTable(tableSettings);
            if (checkedRows.length > 0){
                recheckRows(theTable, checkedRows);
            }
        } else {
            theTable = $('#' + tableId).DataTable(tableSettings);
            theTable.draw();
        }

        if (firstRun){
            $('#' + tableId + '_container').css("width", String($('#' + tableId).width() + 17) + "px");
        }
    }

    theTable.on( 'order.dt search.dt draw.dt', function () {
        theTable.column(1, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
        cell.innerHTML = i+1;
        } );
    } ).draw();

    window.addEventListener('resize', function(){
        theTable.columns.adjust();
    });

    $('#' + tableId + '_searchbox').on( 'keyup', function () {
        theTable.search($(this).val()).draw();
    } );

    $('.toggle-vis').on('click', function (e) {
        e.preventDefault();

        function toggleColumn(column) {
            // Toggle column visibility
            column.visible( ! column.visible() );
            if (column.visible()){
                $(this).removeClass("active");
            } else {
                $(this).addClass("active");
            }
        }

        // Get the column API object
        var targetCols = $(this).attr('data-column').split(",")
        for (let i = 0; i < targetCols.length; i++){
            var column = theTable.column( target_cols[i] );
            toggleColumn(column);
        }
    } );
}

@@ -498,14 +498,745 @@
     
-'data'
+%22drawCallback%22: function( settings ) %7B%0A                $('#' + tableId + ' tr').off().on(%22click%22, function(event) %7B%0A                  if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') %7B%0A                    var obj =$(this).find('input');%0A                    obj.prop('checked', !obj.is(':checked'));%0A                  %7D%0A                  if ($(this).hasClass(%22selected%22) && event.target.tagName.toLowerCase() !== 'a')%7B%0A                    $(this).removeClass(%22selected%22)%0A                  %7D else if (event.target.tagName.toLowerCase() !== 'a') %7B%0A                    $(this).addClass(%22selected%22)%0A                  %7D%0A                  change_buttons()%0A                %7D);%0A            %7D,%0A            %22data%22
 : ta
@@ -1260,17 +1260,17 @@
     
-'
+%22
 columns
-'
+%22
 : co

Add drawCallback for highlighting selected rows to default tableSettings