Job Opportunity - JavaScript Developer
Under Development
This version is currently under development and should not be used in a production environment.

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 wonderfull 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 refence 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 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.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 (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.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 (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.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 (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.

Module Import

When importing Tabulator with specific modules, this module can be included by importing ClipboardModule

import {ClipboardModule} from 'tabulator-tables';

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;
    }
});

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 (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.

Module Import

When importing Tabulator with specific modules, this module can be included by importing DataTreeModule

import {DataTreeModule} from 'tabulator-tables';

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.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 (included in tabulator.js by default)

The edit module allows the user to change data in cells, header filters are also dependant 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 (included in tabulator.js by default)

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.

Module Import

When importing Tabulator with specific modules, this module can be included by importing ExportModule

import {ExportModule} from 'tabulator-tables';

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.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 (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.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 (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.

Module Import

When importing Tabulator with specific modules, this module can be included by importing FrozenColumnsModule

import {FrozenColumnsModule} from 'tabulator-tables';

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.

Module Import

When importing Tabulator with specific modules, this module can be included by importing FrozenRowsModule

import {FrozenRowsModule} from 'tabulator-tables';

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.

Module Import

When importing Tabulator with specific modules, this module can be included by importing GroupRowsModule

import {GroupRowsModule} from 'tabulator-tables';

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.

Module Import

When importing Tabulator with specific modules, this module can be included by importing HistoryModule

import {HistoryModule} from 'tabulator-tables';

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.

Module Import

When importing Tabulator with specific modules, this module can be included by importing HtmlTableImportModule

import {HtmlTableImportModule} from 'tabulator-tables';

Interaction (included in tabulator.js by default)

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 (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.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 (included in tabulator.js by default)

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 (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.

Module Import

When importing Tabulator with specific modules, this module can be included by importing MoveColumnsModule

import {MoveColumnsModule} from 'tabulator-tables';

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.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 (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.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 (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.extendModule("page", "paginationDataSentNames", {
    "page":"pageNo",
});

Any of the default paginationDataReceived options can also be extended:

Tabulator.extendModule("page", "paginationDataReceivedNames", {
    "last_page":"max_page",
});

Module Import

When importing Tabulator with specific modules, this module can be included by importing PageModule

import {PageModule} from 'tabulator-tables';

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.

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';

Print (included in tabulator.js by default)

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 (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.

Module Import

When importing Tabulator with specific modules, this module can be included by importing ReactiveDataModule

import {ReactiveDataModule} from 'tabulator-tables';

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.

Module Import

When importing Tabulator with specific modules, this module can be included by importing ResizeColumnsModule

import {ResizeColumnsModule} from 'tabulator-tables';

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.

Module Import

When importing Tabulator with specific modules, this module can be included by importing ResizeRowsModule

import {ResizeRowsModule} from 'tabulator-tables';

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.

Module Import

When importing Tabulator with specific modules, this module can be included by importing ResizeTableModule

import {ResizeTableModule} from 'tabulator-tables';

Responsive Layout (included in tabulator.js by default)

The responsive layout module hides and shows columns to ensure that they do not exede 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 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.

Module Import

When importing Tabulator with specific modules, this module can be included by importing SelectRowModule

import {SelectRowModule} from 'tabulator-tables';

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.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"},
    ],
});

Module Import

When importing Tabulator with specific modules, this module can be included by importing SortModule

import {SortModule} from 'tabulator-tables';

Validate Data (included in tabulator.js by default)

The validate module allows for validation of editied 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 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 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.

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.