Old Documentation

You are browsing documentation for an old version of Tabulator. Consider upgrading your project to Tabulator 6.3

Modules

Overview
Extending Modules
Available Modules
Default Options

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

Clipboard functionality is dependent on the export module

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

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.

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

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

Print

Print functionality is dependent on the Export module

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

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.

Version 6.3 Released!

Modules

Module Import

Module Import

Module Import

Module Import

Comms (included in tabulator.js by default. Mandatory module - cannot be removed)

Module Import

Module Import

Module Import

Module Import

Module Import

Module Import

Module Import

Module Import

Module Import

Module Import

Module Import

Module Import

Module Import

Module Import

Layout (included in tabulator.js by default. Mandatory module - cannot be removed)

Localization (included in tabulator.js by default. Mandatory module - cannot be removed)

Module Import

Module Import

Module Import

Module Import

Module Import

Module Import

Module Import

Module Import

Module Import

Module Import

Module Import

Module Import

Module Import

Module Import

Module Import

Overriding Default Options