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.