Architecture Concepts

Overview

When you load your data into Tabulator, a lot goes on behind the scenes to transform that raw data into an interactive table with all the features Tabulator has to offer.

This section aims to give you an overview of how Tabulator works its magic so you can have a better understanding of how to use it to its full potential.

Table Initialisation

When you first instantiate your tabulator it does through the following steps to turn a simple div element into a Tabulator.

Deprication Check

Check through the setup options for anything on the deprecated functionality list, if it finds any, it triggers a console warning and then updates the setting to the correct format.

Bind Modules

Find all the registered module and bind them to this table.

Check for HTML Table

Check if the table was created from an HTML table element, if so parse in data and setup options from the table.

Create Core Objects

Create the management objects that will handle the table columns, rows and footer.

Fire tableBuilding Event

The tableBuilding callback is triggered

Determine Render Mode

Check to see if a height has been set on the table, if it has enable the Virtual Dom rendering mode, otherwise fallback to the standard mode.

Detect Browser

Detect the current browser and engage any performance fallbacks needed (ie, simplify rendering for older browsers like IE).

Configure Table

Use setup options to configure the table

Fire tableBuilt Event

The tableBuilt callback is triggered

Load Initial Data

Load the initial data into the table, this can either be from the data option, the ajaxURL option, or an empty array if nothing is set

Basic Data Lifecycle

When data is loaded into the table, Tabulator performs a series of actions on the data to transform it into the rows you see displayed on the table

Clear Old Data

If the data is loaded in a way that replaces the old data (for example calling the setData function), the previous rows are destroyed before the new data is loaded in.

Parse Data Find Out More

Check type of data and convert from JSON & HTML into an array of objects, then convert these objects into RowComponents.

Row Management Pipeline Find Out More

Process data to make sure it is correctly ordered for display, apply filters, sorters, groups, paging etc.

Rendering Find Out More

Display the rows on the table.

Data Parsing

When data is loaded into the table, either directly through one of the config options or the setData function, or through an ajax request Tabulator performs a series of operations on the data to transform it into the RowComponents that are used to build the table.

Parse Data

Check type of data and convert from JSON & HTML into an array of objects.

Mutate Data

Apply any matching mutators to the row data.

Create Row Component

Pass each data object in the array to a new RowComponent and create an empty row DOM element.

Initialize Modules

Initialize row specific modules such as Movable Rows and Selectable Rows.

Bind Events

Bind click an touch events to the row DOM element.

Store

Store the newly created RowComponent in an array of all table rows.

Delayed Row Rendering
It is important to note that no data is rendered directly to the display when it is parsed into the system. To speed up the parsing of data, it is attached to RowComponents but is only rendered later when that row is actually needed to be displayed in the Virtual DOM.

Row Management Pipeline

Before the rows can be displayed on the table, they must be processed to ensure that they arranged correctly, matching the current table setup.

The pipeline outlined below can be started at any point depending on the triggering event, for example if the grouping setup of the table is changed only the grouping part onwards is executed as the data before it in the pipeline will not have changed.

Filter Rows

Apply all filters (programatic and header filters) and remove rows that do not match.

Sort Rows

Reorder the filtered data by applying the sorters to it.

Handle Frozen Rows

Extract and frozen rows from the sorted rows and append them to the header.

Group Rows

If groups are enabled, group the rows and inject the group header elements into the row data.

Data Tree

If data trees are enabled, inject the child rows of any expanded rows.

Page Rows

If pagination is enable, only take the rows that correspond to the current page.