tabulator: Checkbox Column checked state not working when virtual dom is enabled

Description of the Bug I Implemented checkbox column following the issue #1938 and fixed the bugs in that implementation. I have virtual dom enabled in my Tabulator table and now if I click on checkbox column header to select all rows in the table, Tabulator changes the checked state of checkboxes only in the rows visible in the screen. If I scroll down new rows will get replaced in the grid and the checkboxes in that row are not checked.

Tabulator Info

• version 4.2.7
• Below is the code for checkbox column setup:

{
                            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.querySelector('.select-row');
                                if (cell.getData().IsSelected) {
                                    cell.getRow().deselect();
                                    document.querySelector('.select-all-row').checked = false;
                                } else {
                                    cell.getRow().select();
                                    if (cell.getColumn().getTable().getSelectedRows().length === cell.getColumn().getTable().getDataCount()) {
                                        document.querySelector('.select-all-row').checked = true;
                                    }
                                }
                                chkbox.checked = !cell.getData().IsSelected;
                                cell.getData().IsSelected = !cell.getData().IsSelected;
                            },
                            headerClick: function (e, column) {
                                if (column.getTable().getSelectedRows().length !== column.getTable().getDataCount()) {
                                    document.querySelectorAll('.select-row,.select-all-row').forEach(cb => cb.checked = true);
                                    column.getTable().selectRow();
                                } else {
                                    document.querySelectorAll('.select-row,.select-all-row').forEach(cb => cb.checked = false);
                                    column.getTable().deselectRow();
                                }
                                column.getCells().forEach(cell => cell.getData().IsSelected = !cell.getData().IsSelected);
                            }
                        }

Working Example Js Fiddle Demo

To Reproduce Steps to reproduce the behavior:

1. Go to above link.
2. Click on select all checkbox in the checkbox column header.
3. Scroll down to see the check boxes not getting checked.

Expected behavior All the checkbox needs to be checked when I click header checkbox irrespective of virtual dom

Desktop

• OS: Windows10
• Browser : Chrome
• Version 72.0.3626.121 (Official Build) (64-bit)