checkbox column selection issue in tabulator.js

I'm using Tabulator.js v4.2.7 and I have a checkbox column to select rows. This column header has a checkbox to select/deselect all rows.

This is working fine. But after clicking header checkbox all rows will be selected and if I uncheck any row checkbox then header checkbox is not getting unchecked.

Example, if I have 5 rows and if I click header checkbox the all 5 rows will be selected and now if I uncheck 2nd row checkbox remaining 4 rows will still be selected and header checkbox needs to be unchecked. But header checkbox is not getting unchecked.

Here is my code for checkbox column:

{
                            title: 'Select <br/> All <br/> <input type="checkbox" class="select-all-row" aria-label="select all rows" />',
                            field: 'IsSelected',
                            formatter: function (cell, formatterParams, onRendered) {
                                return '<input type="checkbox" class="select-row" aria-label="select this row" />';
                            },
                            width: 50,
                            headerSort: false,
                            headerFilter: false,
                            cssClass: 'text-center',
                            frozen: true,
                            tooltips: false,
                            resizable: false,
                            cellClick: function (e, cell) {
                                var $element = $(cell.getElement());
                                var $chkbox = $element.find('.select-row');
                                if (cell.getData().IsSelected) {
                                    cell.getRow().deselect();
                                } else {
                                    cell.getRow().select();
                                }
                                $chkbox.prop('checked', !cell.getData().IsSelected);
                                cell.getData().IsSelected = !cell.getData().IsSelected;
                            },
                            headerClick: function (e, column) {
                                if (column.getTable().getSelectedRows().length !== column.getTable().getDataCount()) {
                                    $('.select-row,.select-all-row').prop('checked', true);
                                    column.getTable().selectRow();
                                } else {
                                    $('.select-row,.select-all-row').prop('checked', false);
                                    column.getTable().deselectRow();
                                }
                            }
                        }

please assist on where I'm going wrong.

Thanks,

Abdul