DataTable header checkbox when selected does not appear as if selected (rows below get selected)

I have a DataTable in jQuery. First column is a list of checkboxes. Table has multiselect and header of the first column holds a checkbox as well. I want this header to be used as a select all/deselect all. But what happens is that my checkbox in table header stays unchanged. The functionality is there, my rows are selected/deselected but the I expected the header checkbox to be checked with the rest of the rows when it is selected.

uiComponents.receiptTable = function ($this, args) {
    var table = $(args.selector).DataTable({
        scrollY: "400px",
        scrollX: true,
        colReorder: true,
        responsive: true,
        select: {
            style: "multi",
            selector: "td:first-child"
        },
        processing: true,
        info: true,
        autoWidth: true,
        deferRender: true,
        serverSide: false,
        ajax: {
            url: args.url,
            type: "GET",
            dataSrc: ""
        },
        language: {
            url: '../Content/DataTables/Languages/' + args.culturename + '.json'
        },
        initComplete: function () {
            var select_checkbox = $(".dataTables_scrollHead thead th:first-child");
            select_checkbox.on("click",
                    function() {
                        if (select_checkbox.hasClass("all")) {
                            table.rows().deselect();
                            select_checkbox.removeClass("all");
                            select_checkbox.attr("checked", false);
                        } else {
                            table.rows().select();
                            select_checkbox.attr("checked", true);
                            select_checkbox.addClass("all");
                        }
                    });

            table.on("select deselect",
            function() {
                if (table.rows({
                        selected: true
                    }).count() !==
                    table.rows().count()) {
                        select_checkbox.removeClass("all");
                } else {
                    select_checkbox.addClass("all");
                }
            });
        },
        columns: [
            { data: "Id", visible: false, searchable: false },
            {
                targets: 0,
                defaultContent: "",
                orderable: false,
                className: "select-checkbox"
            },
            { data: "Sku" },
            { data: "SkuName" },
            { data: "ColumnX" },
            { data: "ColumnY" }
        ]
    });
}

and here is the image of what I get: AllSelected

When I inspected the header checkbox element vs those checkbox elements in the rows I see that those checkboxes in rows (when checked) have pseudoselector ::after (checkbox from row) while the checkbox in header does not appear to gain that ::after when clicked upon. Does anyone have any idea how to make sure that my checkbox in header gets "checked" as well? Here is what I see when I inspect the header checkbox (header checkbox inspect)