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)

[fingers10]

Hey @angeliski ,

I changed selectable to true and now the Deselection Error is not logged.

Thanks, Abdul

[tentus]

Your issue is that you’re manipulating the dom, not the underlying data, so the selections evaporate when the virtual dom is scrolled.

take a look at this variation: https://jsfiddle.net/m3jpghb8/ I’ve turned on reactiveData, so the original array can be updated and also affect the tabulator data, and then made the formatter look at the data when rendering the checkbox, and then finally tweaked the headerClick logic to update the original array and force a redraw after the update.