Modules
Overview
Tabulator is built in a modular fashion with a core codebase providing basic table rendering functionality and a series of modules that provide all of its wonderful features.
By including only the core and your needed modules in your project, you can keep your imported code to a minimum and your tables fast.
Each module below includes a reference to the file that should be imported when using Tabulator in this modular fashion
Full Package
If you would prefer to include the whole Tabulator library in your project, complete with all the built in modules, you can instead import TabulatorFull, this will pre-register all modules.
Full details on how to use the modular install approach can be found in the Install Documentation
Extending Modules
A lot of the modules come with a range of default settings to make setting up your table easier, for example the sorters, formatters and editors that ship with Tabulator as standard.
If you are using a lot of custom settings over and over again (for example a custom sorter). you can end up re-delcaring it several times for different tables. To make your life easier Tabulator allows you to extend the default setup of each module to make your custom options as easily accessible as the defaults.
Using the extendModule function on the global Tabulator variable allows you to globally add these options to all tables.
The function takes three arguments, the name of the module, the name of the property you want to extend, and an object containing the elements you want to add in your module. In the example below we extend the format module to add two new default formatters:
Tabulator.extendModule("format", "formatters", { bold:function(cell, formatterParams){ return "<strong>" + cell.getValue() + "</strong>"; //make the contents of the cell bold }, uppercase:function(cell, formatterParams){ return cell.getValue().toUpperCase(); //make the contents of the cell uppercase } });
These formatters can then be access like any of the default formatters in the column definition object:
{title:"name", field:"name", formatter:"bold"}, {title:"Car Registration", field:"reg", formatter:"uppercase"},
The extendModule function must be called on Tabulator after it has been included in your project but before any tables are instantiated.
Note: if you use a property in your module object that is already in use, the existing property will be overwritten.
Available Modules
This section will take you through all of the available modules and how to extend them further with your own custom functionality.
As mentioned above, Tabulator comes with all modules installed by default.
Accessors
The accessor module allows for manipulation of data as it is retrieved from Tabulator.
More information on these functions can be found in the Accessors Documentation.
This can be extended to add custom accessor functions to the default list:
Tabulator.extendModule("accessor", "accessors", { roundDown:function(value, data, accessorParams){ return Math.floor(value); //return the new value for the cell data. } });
You can use an accessor defined in the module by passing the name to the accessor property in the column definition object.
var table = new Tabulator("#example-table", { columns:[ {field:"tax", title:"Tax (£)", accessor:"roundDown"}, ], });
Module Import
When importing Tabulator with specific modules, this module can be included by importing AccessorModule
import {AccessorModule} from 'tabulator-tables';
Ajax Requests
The ajax module allows for loading data from remote sources using ajax requests.
More information on these functions can be found in the Ajax Documentation.
The default ajax configuration object can be extended to changed the default request behaviour. the example below will change the default request type to POST and the contentType header to application/JSON.
Tabulator.extendModule("ajax", "defaultConfig", { type:"POST", contentType : "application/json; charset=utf-8" });
Module Import
When importing Tabulator with specific modules, this module can be included by importing AjaxModule
import {AjaxModule} from 'tabulator-tables';
Clipboard
The clipboard module allows data to be copied and pasted to and from the clipboard.
More information on these functions can be found in the Clipboard Documentation.
Paste Parsers
This module can be extended to add custom paste parsers to help parse incomming clipboard data into the table:
Tabulator.extendModule("clipboard", "pasteParsers", { text:function(clipboard){ return //return row format from data } });
You can use a paste parser defined in the module by passing the name to the clipboardPasteParser property in the settings object.
var table = new Tabulator("#example-table", { clipboardPasteParser: "text", });
Paste Actions
This module can be extended to add custom paste actions to help add incomming clipboard data to the table:
Tabulator.extendModule("clipboard", "pasteActions", { replace:function(clipboard){ return this.table.replaceData(data); } });
You can use a paste action defined in the module by passing the name to the clipboardPasteAction property in the settings object.
var table = new Tabulator("#example-table", { clipboardPasteAction: "replace", });
Module Import
When importing Tabulator with specific modules, this module can be included by importing ClipboardModule
import {ClipboardModule} from 'tabulator-tables';
Column Calculation
The column calculation module allows for automatic column calculation rows to be generated in the header and footer of the table.
More information on these functions can be found in the Column Calculations Documentation.
This can be extended to add custom calculation functions to the default list:
Tabulator.extendModule("columnCalcs", "calculations", { "adult":function(values, data, calcParams){ //values - array of column values //data - all table data //calcParams - params passed from the column definition object var count = 0; values.forEach(function(value){ if(value > 18){ count ++; } }); return calc; } });
Module Import
When importing Tabulator with specific modules, this module can be included by importing ColumnCalcsModule
import {ColumnCalcsModule} from 'tabulator-tables';
Comms (included in tabulator.js by default. Mandatory module - cannot be removed)
The comms module handles inter-table communication.
The module is used as part of Movable Rows and Downloads.
Data Tree
The data tree module handles interactive nested data layouts.
More information on these functions can be found in the Data Tree Documentation.
Module Import
When importing Tabulator with specific modules, this module can be included by importing DataTreeModule
import {DataTreeModule} from 'tabulator-tables';
Download
The download module allows for downloading data from the table into a file.
More information on these functions can be found in the Download Documentation.
This can be extended to add custom download functions to the default list:
Tabulator.extendModule("download", "downloaders", { string:function(columns, data, options){ var fileContents = data.toString(); return 'data:application/txt;charset=utf-8,' + encodeURIComponent(fileContents); } });
You can now use this in the download function:
table.download("string", "data.txt");
Module Import
When importing Tabulator with specific modules, this module can be included by importing DownloadModule
import {DownloadModule} from 'tabulator-tables';
Edit
The edit module allows the user to change data in cells, header filters are also dependent on this module.
More information on these functions can be found in the Editing Data Documentation.
This can be extended to add custom editor functions to the default list:
Tabulator.extendModule("edit", "editors", { uppercaseInput:function(cell, onRendered, success, cancel, editorParams){ //create and style input var cellValue = cell.getValue().toUpperCase(), input = document.createElement("input"); input.setAttribute("type", "text"); input.style.padding = "4px"; input.style.width = "100%"; input.style.boxSizing = "border-box"; input.value = cellValue; onRendered(function () { input.focus(); input.style.height = "100%"; }); function onChange(e) { if (input.value != cellValue) { success(input.value.toUpperCase()); } else { cancel(); } } //submit new value on blur or change input.addEventListener("change", onChange); input.addEventListener("blur", onChange); //submit new value on enter input.addEventListener("keydown", function (e) { if (e.keyCode == 13) { success(input.value); } if (e.keyCode == 27) { cancel(); } }); return input; }, });
You can use an editor defined in the module by passing the name to the editor property in the column definition object.
var table = new Tabulator("#example-table", { columns:[ {field:"tax", title:"Tax (£)", editor:"uppercaseInput"}, ] });
Module Import
When importing Tabulator with specific modules, this module can be included by importing EditModule
import {EditModule} from 'tabulator-tables';
Export
Converts the current table into a standard HTML table.
Used by the Clipboard, Print and Downloads modules and the getHtml function
More information on these functions can be found in the HTML Export Documentation.
Column Lookups
This module can be extended to add custom column lookups to define which columns should be included in an exported output. It should return an array of columns, or undefined if all columns are to be included:
Tabulator.extendModule("clipboard", "columnLookups", { range:function(clipboard){ return this.modules.selectRange.selectedColumns(); //array of columns } });
This can be used on any range lookup type property that exports data from the table such asclipboardCopyRowRange property in the settings object.
var table = new Tabulator("#example-table", { clipboardCopyRowRange: "range", });
Row Lookups
This module can be extended to add custom row lookups to define which rows should be included an exported output. It should return an array of rows:
Tabulator.extendModule("clipboard", "rowLookups", { range:function(clipboard){ return this.modules.selectRange.selectedRows(); //array of rows } });
This can be used on any range lookup type property that exports data from the table such asclipboardCopyRowRange property in the settings object.
var table = new Tabulator("#example-table", { clipboardCopyRowRange: "range", });
Module Import
When importing Tabulator with specific modules, this module can be included by importing ExportModule
import {ExportModule} from 'tabulator-tables';
Filter Data
The filter module allows for filtering of the rows that appear in the table..
More information on these functions can be found in the Filter Documentation.
This can be extended to add custom filter functions to the default list:
Tabulator.extendModule("filter", "filters", { "===":function(headerValue, rowValue, rowData, filterParams){ //headerValue - the value of the header filter element //rowValue - the value of the column in this row //rowData - the data for the row being filtered //filterParams - params object passed to the headerFilterFuncParams property return rowVal === headerValue ? true : false; } });
You can now use this in any of the filter functions:
table.setFilter("age", "===", 10);
Module Import
When importing Tabulator with specific modules, this module can be included by importing FilterModule
import {FilterModule} from 'tabulator-tables';
Format Data
The format module allows different display options for data in the table.
More information on these functions can be found in the Formatter Documentation.
This can be extended to add custom formatter functions to the default list:
Tabulator.extendModule("format", "formatters", { file:function(cell, formatterParams){ return "<img class='fileicon' src='/images/fileicons/" + cell.getValue() + ".png'></img>"; }, });
You can use a formatter defined in the module by passing the name to the formatter property in the column definition object.
var table = new Tabulator("#example-table", { columns:[ {field:"Photo", title:"photo", formatter:"file"}, ], });
Module Import
When importing Tabulator with specific modules, this module can be included by importing FormatModule
import {FormatModule} from 'tabulator-tables';
Frozen Columns
The frozen column module allows columns to be held in place while the table is horizontally scrolled.
More information on these functions can be found in the Frozen Columns Documentation.
Module Import
When importing Tabulator with specific modules, this module can be included by importing FrozenColumnsModule
import {FrozenColumnsModule} from 'tabulator-tables';
Frozen Rows
The frozen row module allows rows to be held in place in the header while the table is vertically scrolled.
More information on these functions can be found in the Frozen Rows Documentation.
Module Import
When importing Tabulator with specific modules, this module can be included by importing FrozenRowsModule
import {FrozenRowsModule} from 'tabulator-tables';
Group Rows
The group rows module allows rows to be grouped together by a column value.
More information on these functions can be found in the Grouping Documentation.
Module Import
When importing Tabulator with specific modules, this module can be included by importing GroupRowsModule
import {GroupRowsModule} from 'tabulator-tables';
History
The history module allows the Tabulator to track user interaction with table data, and makes the undo and redo function available.
More information on these functions can be found in the History Documentation.
Module Import
When importing Tabulator with specific modules, this module can be included by importing HistoryModule
import {HistoryModule} from 'tabulator-tables';
HTML Table Import
The allows HTML tables to be converted to Tabulators.
More information on these functions can be found in the HTML Import Documentation.
Module Import
When importing Tabulator with specific modules, this module can be included by importing HtmlTableImportModule
import {HtmlTableImportModule} from 'tabulator-tables';
Import Data
The import module is responsible for loading non JavaScript data types into the table.
More information on these functions can be found in the Data Loading Documentation.
This can be extended to add custom importer functions to the default list:
Tabulator.extendModule("import", "importers", { jsonCustom:function(fileContents){ return JSON.parse(fileContents); }, });
You can use a importer defined in the module by passing the name to the importer property in the column definition object.
table.import("jsonCustom", ".json");
Module Import
When importing Tabulator with specific modules, this module can be included by importing ImportModule
import {ImportModule} from 'tabulator-tables';
Interaction
The interaction module is responsible for monitoring click, tap and mouse events and triggering the matching table events.
More information on these functions can be found in the Events Documentation.
Module Import
When importing Tabulator with specific modules, this module can be included by importing InteractionModule
import {InteractionModule} from 'tabulator-tables';
Key Bindings
The key bindings module allows user interaction with the table through keyboard shortcuts.
More information on these functions can be found in the Key Bindings Documentation.
Any of the default keybindings options can be extended:
Tabulator.extendModule("keybindings", "bindings", { navPrev:"shift + 9", });
The default list of keybinding actions and their functions can be extended:
Tabulator.extendModule("keybindings", "actions", { "deleteSelectedRows":function(){ //delete selected rows var rows = this.table.getSelectedRows(); rows.forEach(function(row){ row.delete(); }); }, });
Module Import
When importing Tabulator with specific modules, this module can be included by importing KeybindingsModule
import {KeybindingsModule} from 'tabulator-tables';
Layout (included in tabulator.js by default. Mandatory module - cannot be removed)
The layout module handles column layout modes
More information on this functionality can be found in the Layout Documentation.
Localization (included in tabulator.js by default. Mandatory module - cannot be removed)
The localization module allows for changing the text of tabulator control elements to match the language on the computer viewing them.
More information on these functions can be found in the Localization Documentation.
This can be extended to add custom language definitions to the default list:
Tabulator.extendModule("localize", "langs", { "en":{ "columns":{ }, "ajax":{ "loading":"Loading", "error":"Error", }, "pagination":{ "page_size":"Page Size", "first":"First", "first_title":"First Page", "last":"Last", "last_title":"Last Page", "prev":"Prev", "prev_title":"Prev Page", "next":"Next", "next_title":"Next Page", }, "headerFilters":{ "default":"filter column...", "columns":{} } }, });
This will then be available to the locale auto-detect as well as the setLocale function.
table.setLocale("en");
Menu
The menu module handles generation of context and header menus.
More information on this functionality can be found in the Menu Documentation.
Module Import
When importing Tabulator with specific modules, this module can be included by importing MenuModule
import {MenuModule} from 'tabulator-tables';
Movable Columns
The movable columns module allows the user to drag and drop columns in any order they like.
More information on these functions can be found in the Movable Column Documentation.
Module Import
When importing Tabulator with specific modules, this module can be included by importing MoveColumnsModule
import {MoveColumnsModule} from 'tabulator-tables';
Movable Rows
The movable rows module allows the user to drag and drop rows in any order they like.
More information on these functions can be found in the Movable Rows Documentation.
This module can be extended to add custom receiver functions to the default list:
Tabulator.extendModule("moveRow", "receivers", { nameUpdate:function(fromRow, toRow, fromTable){ if(toRow){ toRow.update({"name":fromRow.getData().name}); return true; } return false; } });
You can use a receiver defined in the module by passing the name to the movableRowsReceiver option.
var table = new Tabulator("#example-table", { movableRowsReceiver: "nameUpdate", })
This module can also be extended to add custom sender functions to the default list:
Tabulator.extendModule("moveRow", "senders", { incrementMoved:function(fromRow, toRow, fromTable){ fromRow.update({moved:fromRow.getData().moved + 1}) } });
You can use a sender defined in the module by passing the name to the movableRowsSender option.
var table = new Tabulator("#example-table", { movableRowsSender: "incrementMoved", })
Module Import
When importing Tabulator with specific modules, this module can be included by importing MoveRowsModule
import {MoveRowsModule} from 'tabulator-tables';
Mutators
The mutator module allows for manipulation of data as it is entered into Tabulator.
More information on these functions can be found in the Mutators Documentation.
This can be extended to add custom mutator functions to the default list:
Tabulator.extendModule("mutator", "mutators", { tooManyCars:function(value, data, type, mutatorParams){ return value > 5; }, });
You can use a mutator defined in the module by passing the name to the mutator property in the column definition object.
var table = new Tabulator("#example-table", { columns:[ {field:"tax", title:"Tax (£)", mutator:"tooManyCars"}, ], });
Module Import
When importing Tabulator with specific modules, this module can be included by importing MutatorModule
import {MutatorModule} from 'tabulator-tables';
Pagination
The pagination module allows rows to be split up into pages for navigation rather than using a vertical scroll bar.
More information on these functions can be found in the Pagination Documentation.
This can be extended to add custom counter functions to the default list:
Tabulator.extendModule("page", "pageCounters", { rowpage:function(pageSize, currentRow, currentPage, totalRows, totalPages){ return "Showing " pageSize + " rows of " + totalRows + " total"; } });
Module Import
When importing Tabulator with specific modules, this module can be included by importing PageModule
import {PageModule} from 'tabulator-tables';
Persistent Config
The persistence module allows the layout of columns and the current sorters and filters to be stored in local storage or cookies so that a users preferences can be remembered every time they reload the page.
This can be extended to add custom writer functions to the default list:
Tabulator.extendModule("persistence", "writers", { example:function(id, type, data){ //id - tables persistence id //type - type of data being persisted ("sort", "filter", "group", "page" or "columns") //data - array or object of data localStorage.setItem(id + "-" + type, JSON.stringify(data)); }, });
You can use a sorter defined in the module by passing the name to the persistenceWriterFunc property in the column definition object.
var table = new Tabulator("#example-table", { persistenceWriterFunc: "example" });
This can be extended to add custom reader functions to the default list:
Tabulator.extendModule("persistence", "readers", { example:function(id, type){ //id - tables persistence id //type - type of data being persisted ("sort", "filter", "group", "page" or "columns") var data = localStorage.getItem(id + "-" + type); return data ? JSON.parse(data) : false; }, });
You can use a sorter defined in the module by passing the name to the persistenceReaderFunc property in the column definition object.
var table = new Tabulator("#example-table", { persistenceReaderFunc: "example", });
If you have extended both the reader and writer objects with functions of the same name you can use the persistenceMode property as short hand to load them both into the table
var table = new Tabulator("#example-table", { persistenceMode: "example", });
More information on these functions can be found in the Persistent Config Documentation.
Module Import
When importing Tabulator with specific modules, this module can be included by importing PersistenceModule
import {PersistenceModule} from 'tabulator-tables';
Popup
The popup module handles generation of context and header popups.
More information on this functionality can be found in the Popup Documentation.
Module Import
When importing Tabulator with specific modules, this module can be included by importing PopupModule
import {PopupModule} from 'tabulator-tables';
Manages printing of the table and print styling.
More information on these functions can be found in the Printing Documentation.
Module Import
When importing Tabulator with specific modules, this module can be included by importing PrintModule
import {PrintModule} from 'tabulator-tables';
Reactive Data
The reactive data module allows tabulator to watch an array of table data objects and automatically update the table when the data is altered.
More information on these functions can be found in the Reactive Data Documentation.
Module Import
When importing Tabulator with specific modules, this module can be included by importing ReactiveDataModule
import {ReactiveDataModule} from 'tabulator-tables';
Resizable Columns
The resizable columns module allows the user to resize columns by dragging on the edge of the columns.
More information on these functions can be found in the Resizable Columns Documentation.
Module Import
When importing Tabulator with specific modules, this module can be included by importing ResizeColumnsModule
import {ResizeColumnsModule} from 'tabulator-tables';
Resizable Rows
The resizable rows module allows the user to resize rows by dragging on the top or bottom edges of a row.
More information on these functions can be found in the Resizable Rows Documentation.
Module Import
When importing Tabulator with specific modules, this module can be included by importing ResizeRowsModule
import {ResizeRowsModule} from 'tabulator-tables';
Resizable Table
The table resize module allows the table to automatically redraw its contents to fit its container when the table container is resized.
More information on these functions can be found in the Table Resize Documentation.
Module Import
When importing Tabulator with specific modules, this module can be included by importing ResizeTableModule
import {ResizeTableModule} from 'tabulator-tables';
Responsive Layout
The responsive layout module hides and shows columns to ensure that they do not excede the width of the table. Great for use on mobile devices.
More information on these functions can be found in the Responsive Layout Documentation.
Module Import
When importing Tabulator with specific modules, this module can be included by importing ResponsiveLayoutModule
import {ResponsiveLayoutModule} from 'tabulator-tables';
Selectable Range
The selectable range module allows the user to select groups of cells to take action on them.
More information on these functions can be found in the Selectable Cell Ranges Documentation.
Module Import
When importing Tabulator with specific modules, this module can be included by importing SelectRangeModule
import {SelectRangeModule} from 'tabulator-tables';
Selectable Rows
The selectable rows module allows the user to select a number of rows to take action on them.
More information on these functions can be found in the Selectable Rows Documentation.
Module Import
When importing Tabulator with specific modules, this module can be included by importing SelectRowModule
import {SelectRowModule} from 'tabulator-tables';
Sorting Data
The sorting module allows for reordering of rows in the table based on a column value.
More information on these functions can be found in the Sorting Documentation.
This can be extended to add custom sorter functions to the default list:
Tabulator.extendModule("sort", "sorters", { datetime:function(a, b){ a = luxon.DateTime.fromFormat(a, "dd/MM/yyyy hh:mm"); b = luxon.DateTime.fromFormat(b, "dd/MM/yyyy hh:mm"); return a - b; }, });
You can use a sorter defined in the module by passing the name to the sorter property in the column definition object.
var table = new Tabulator("#example-table", { columns:[ {field:"start", title:"Start Time", sorter:"datetime"}, ], });
Module Import
When importing Tabulator with specific modules, this module can be included by importing SortModule
import {SortModule} from 'tabulator-tables';
Spreadsheet
The spreadsheet module can generate a blank empty spreadsheet with standard alphabetical columns and numeric rows, and then load an array of data into that table.
More information on this functionality can be found in the Spreadsheet Documentation.
Module Import
When importing Tabulator with specific modules, this module can be included by importing SpreadsheetModule
import {SpreadsheetModule} from 'tabulator-tables';
Tooltip
The tooltip module handles generation of context and header tooltips.
More information on this functionality can be found in the Tooltip Documentation.
Module Import
When importing Tabulator with specific modules, this module can be included by importing TooltipModule
import {TooltipModule} from 'tabulator-tables';
Validate Data
The validate module allows for validation of edited data before it is stored in the table.
More information on these functions can be found in the Validation Documentation.
This can be extended to add custom validator functions to the default list:
Tabulator.extendModule("validate", "validators", { divTen:function(cell, value, parameters){ //cell - the cell component for the edited cell //value - the new input value of the cell //parameters - the parameters passed in with the validator return !value % 10; //only allow values that are divisible by 10; }, });
Module Import
When importing Tabulator with specific modules, this module can be included by importing ValidateModule
import {ValidateModule} from 'tabulator-tables';
Default Options
If you pass the same setup options to your Tabulator constructor object into every table you build on a page, then you can simplify your table setup process by setting these globally for all tables.
You can do this by setting the options on the defaultOptions object on the Tabulator class, these will then automatically apply to any new Tabulator's unless the value is overwritten in a specific tables construction object when you create a new table.
For example the below code will cause all Tabulators to have movable rows by default and set the layout mode to fitColumns.
Tabulator.defaultOptions.movableRows = true; Tabulator.defaultOptions.layout = "fitColumns";
These options must be set on Tabulator after it has been included in your project but before any tables are instantiated.
Overriding Default Options
If you define an option in your defaultOptions object then it is possible to override it on a specific table by including the replacement for that option in the table constructor:
//Set Default option for all tables Tabulator.defaultOptions.layout = "fitColumns"; //Override default option in a specific table var table = new Tabulator("#example-table", { layout:"fitData", //override specific default option });
Object Properties
It is worth noting that any option defined in a table will completely replace the default option. If you are using an object or array as the value for the property you are overriding, it will not merge the values of each property of the object, it will completely replace the default object with the new one defined in your table.