I am currently using Tabulator version 6.2.1. In our implementation, the contents of the cells can be influenced which should result a new ‘redraw’ of that particular cells (and potentially all cells that already were rendered) without having the scroll position reset to it’s original position. What I am trying to ask is: Is there a way to tell tabulator to:

• redraw / invalidate the cells that are currently visible and part of the virtual window that is not visible?
• invalidate all already rendered cells (which would result in triggering the onRendered custom formatter again) to ensure they will get the new required state as well when they become visible.
• all of this without getting the scroll position of the table reset to the first row (as this is very annoying in case of having a very long list of items).

There are several things I’ve tried:

• Issue: Get hold of the “visible” rows instead of getting all rows. As you can imagine getting all rows and re-render these (performance wise) will have a huge impact in case the user has already scrolled down the whole list of items (in case of having a large list). Besides that: the visible rows do not contain the ones that are part of the virtual window. Additionally no re-render will be triggered on the cells that were already rendered, but not part of the virtual window. Additionally table.getRows does not include the child row items. This would mean I would need to iterate those to apply the re-render on these items.

• Solution 1: Re-drawing the table (this has the disadvantage of the scroll position being reset).

• Solution 2: Re-drawing the table re-applying the previous scroll position. In case the scroll position is still in the first virtual window.

The following piece of code does not give me the possibility to re-render the cells that were already rendered (and are part of the virtual window):

function changeBackgroundIssue() {
    const visibleRows = table.getRows( "visible" );
    visibleRows.forEach( ( row ) => {
        const backgroundColor = getBackgroundColor();
        const cell = row.getCell( "name" );
        const cellElement = d3.select( cell.getElement() );
        cellElement
            .style( "background-color", backgroundColor )
    } );
}

An example of this (and the other use-cases described above) can be found here:
https://jsfiddle.net/nbg3mko6/

Please note that the give example exposes the problem in this small list already. But the use-case we have is a table that need to render 20.000K+ rows.