Virtual DOM Rendering
Overview
There are two rendering modes in Tabulator, Virtual DOM mode, which allows 100,000's of rows to be processed without performance overhead and standard mode, which is fallback in case the VIrutal DOM cant be used, it renders all the rows into the table as soon as they are pass through the row management pipeline.
As the standard render mode simply renders rows as they are loaded into the table there is minimal explanation needed. In this section We will cover the inner workings of the Vitual DOM mode in more detail.
Visible Row Window
To make the table more responsive the table only renders a subset of the total rows called the window.
The window contains all visible rows. In addition to these it also contains a table heights worth of rows above and below the visible rows, called buffers, these allows the user to scroll the table, with the rows being added and removed out of sight of the visible area.
The scroll bar is maintained by adding top and bottom padding to the window, equivalent to the remaining rows in the table above and below the window.
Scrolling the table
In this example we will talk about what happens when the table is scrolled, we will use a scroll down for the example, but the process can be reversed for scrolling up.
User scrolls the table
The user triggers a scroll event, with the mouse scroll wheel, scroll bar or down arrow key.
Add Next Row
When the user has scrolled down the height of the next row it is added to the bottom of the window.
The window's bottom padding is adjusted to compensate for the change in height.
Initialize Next Row
If the row has never been rendered before, or is dirty (eg. the data or layout has changed since it was last rendered) it is initialized. Its CellComponents are generated, the rowFormatter is called and its DOM element it filled.
If the row has already been initialised the existing element is displayed.
Remove Old Row
When the user has scrolled down the height of the first row in the window, the row is removed from the window. The elements are preserved in case it needs to be shown again, they are just removed from the DOM.
The window's top padding is adjusted to compensate for the change in height.
Table Fill
When the table is scrolled more than the height of the window in one go, or when the data is replaced (eg. the setData function is called), the window is emptied of all rows and the following method is used to rebuild the layout.
Clear the Window
Empty all rows from the window and clear all padding.
Find Top Row
Givent the current vertical scroll position of the table, work out what the top most visible row should be.
Generate Top Window Buffer
Working back from the top visible row, prepend enough rows to the top of the window to generate a buffer of 1x the table height.
If there are not enough rows to do this, go as far as the start of the row array and stop.
Add Visible Rows
Working from the top visible row, append enough rows to to the window to fill the visible table height.
If there are not enough rows, go as far as the end of the row array and stop
Generate Bottom Window Buffer
working from the bottom visible row, append enough rows to the window to generate a buffer of 1x the table height.
if there are not enough rows, fo as far as the end of the row array and stop
Initialize Rows
loop through all the rows in the window, if the row has never been rendered before, or is dirty (eg, the data or layout has changed since it was last rendered) it is initialized. Its CellComponents are generated, the rowFormatter is called and its DOM element it filled.
If the row has already been initialised the existing DOM is displayed
Pad Window
Add the necessarytop and bottom padding to position the window in the correct place in the table
Scroll to window
Adjust the vertical scroll position of the table to align the top row of the window with the top of the table element
Configuration
Details on how to configure the Virtual DOM can be Found Here.