Draw (and other) events not firing when data is loaded by Javascript variable

I have two identical tables except that one uses an ajax call to load the data and the other uses a Javascript variable for the data.

I want to each of them to be hidden if there's no data in the table, so I've added the following on API method to both:

$(function() {
    var table = $("#table").DataTable({

        yada yada yada

    }).on("draw", function() {
        if (!table.data().any()) {
            $("#table_wrapper").children().hide();
        } else {
            $("#table_wrapper").children().show();
        }
    });
});

This works for the ajax-sourced table, but it doesn't seem the draw event occurs for the Javascript variable-sourced table. I've also tried the init event and the processing event, etc, but none work.

By inserting a console.log("drawing"); line I've verified the JS variable-sourced table never enters the on("draw") function at all.

Does this work correctly or should I be looking at a different event that would work?

Code for the ajax-sourced Datatable:

$(function() {
    var table = $("#table").DataTable({
        "paging": false,
        "autoWidth": true,
        "columnDefs": [{
            "targets": "_all",
            "render": $.fn.dataTable.render.text(),
            "searchPanes": {
                "show": false
            }
        }],
        "ajax": {
            "url": "/wiki/extensions/GHSFHA/models/mRegionPlayoffGames.php",
            "data": {
                "season": "2020",
                "organization": "GHSA",
                "class": "AAAA",
                "region": "5"
            }
        },
        "columns": [{
            "data": "game_type",
            "name": "game_type"
        }, {
            "data": "game_date",
            "name": "game_date"
        }, {
            "data": "playoff_game",
            "name": "playoff_game"
        }, {
            "data": "playoff_game_score",
            "name": "playoff_game_score"
        }],
        "ordering": false,
        "searching": false,
        "info": false,
        "dom": "tri"
    }).on("draw", function() {
        console.log("drawing");
        if (!table.data().any()) {
            $("#table_wrapper").children().hide();
        } else {
            $("#table_wrapper").children().show();
        }
    });
});

For the JS variable-sourced Datatable:

var table_data = [];
$(function() {
    var table = $("#table").DataTable({
        "paging": false,
        "autoWidth": true,
        "columnDefs": [{
            "targets": "_all",
            "render": $.fn.dataTable.render.text(),
            "searchPanes": {
                "show": false
            }
        }],
        "columns": [{
            "data": "game_type",
            "name": "game_type"
        }, {
            "data": "game_date",
            "name": "game_date"
        }, {
            "data": "playoff_game",
            "name": "playoff_game"
        }, {
            "data": "playoff_game_score",
            "name": "playoff_game_score"
        }],
        "ordering": false,
        "searching": false,
        "info": false,
        "dom": "tri",
        "data": table_data
    }).on("draw", function() {
        console.log("drawing");
        if (!table.data().any()) {
            $("#table_wrapper").children().hide();
        } else {
            $("#table_wrapper").children().show();
        }
    });
});