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.