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.
All of the available modules are installed by default to ensure that you can provide your users with the richest experience possible with minimal setup.
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 time 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.prototype.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 the tabulator.js file is included 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 (included in tabulator.js by default)
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.prototype.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"},
],
});
Ajax Requests (included in tabulator.js by default)
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.prototype.extendModule("ajax", "defaultConfig", {
type:"POST",
contentType : "application/json; charset=utf-8"
});
Clipboard (included in tabulator.js by default)
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.
Column Calculation (included in tabulator.js by default)
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;
}
});
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 (included in tabulator.js by default)
The data tree module handles interactive nested data layouts.
More information on these functions can be found in the Data Tree Documentation.
Download (included in tabulator.js by default)
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.prototype.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");
Edit (included in tabulator.js by default)
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.prototype.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"},
]
});
Filter Data (included in tabulator.js by default)
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.prototype.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);
Format Data (included in tabulator.js by default)
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.prototype.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"},
],
});
Frozen Columns (included in tabulator.js by default)
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.
Frozen Rows (included in tabulator.js by default)
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.
Group Rows (included in tabulator.js by default)
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.
History (included in tabulator.js by default)
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.
HTML Table Import (included in tabulator.js by default)
The allows HTML tables to be converted to Tabulators.
More information on these functions can be found in the HTML Import Documentation.
Key Bindings (included in tabulator.js by default)
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.prototype.extendModule("keybindings", "bindings", {
navPrev:"shift + 9",
});
The default list of keybinding actions and their functions can be extended:
Tabulator.prototype.extendModule("keybindings", "actions", {
"deleteSelectedRows":function(){ //delete selected rows
var rows = this.table.getSelectedRows();
rows.forEach(function(row){
row.delete();
});
},
});
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.prototype.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");
Movable Columns (included in tabulator.js by default)
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.
Movable Rows(included in tabulator.js by default)
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.prototype.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.prototype.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",
})
Mutators (included in tabulator.js by default)
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.prototype.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"},
],
});
Pagination (included in tabulator.js by default)
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.
Any of the default paginationDataSent options can be extended:
Tabulator.prototype.extendModule("page", "paginationDataSentNames", {
"page":"pageNo",
});
Any of the default paginationDataReceived options can also be extended:
Tabulator.prototype.extendModule("page", "paginationDataReceivedNames", {
"last_page":"max_page",
});
Persistent Config (included in tabulator.js by default)
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.
More information on these functions can be found in the Persistent Config Documentation.
Reactive Data (included in tabulator.js by default)
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.
Resizable Columns (included in tabulator.js by default)
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.
Resizable Rows (included in tabulator.js by default)
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.
Resizable Table (included in tabulator.js by default)
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.
Responsive Layout (included in tabulator.js by default)
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.
Selectable Rows (included in tabulator.js by default)
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.
Sorting Data (included in tabulator.js by default)
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.prototype.extendModule("sort", "sorters", {
datetime:function(a, b){
a = moment(a, "DD/MM/YYYY hh:mm");
b = moment(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"},
],
});
Validate Data (included in tabulator.js by default)
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.prototype.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;
},
});
Default Options
If you always pass the same setup options to your Tabulator constructor object, you also make these the default options by changing them in the defaultOptions object on the Tabulator prototype, 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.
This code must be inserted after the tabulator.js file is included but before any tables are instantiated.
For example the below code will cause all Tabulators to have resizable columns by default.
Tabulator.prototype.defaultOptions.resizableColumns = true; Tabulator.prototype.defaultOptions.layout = "fitColumns";