Localization

• Overview
• Defining Languages
• Setting Current Locale
• Extending Localization

Overview Demo

If you want to make your table accessible to users from a wide variety of languages then Tabulators localization features are for you.

Using the langs option you can specify the localized content for the table in any number of languages.

<div>
    <button id="lang-french">French</button>
    <button id="lang-german">German</button>
    <button id="lang-default">Default (English)</button>
</div>

<div id="example-table"></div>

//Build Tabulator
var table = new Tabulator("#example-table", {
    height:"311px",
    layout:"fitColumns",
    pagination:"local",
    langs:{
        "fr-fr":{ //French language definition
            "columns":{
                "name":"Nom",
                "progress":"Progression",
                "gender":"Genre",
                "rating":"Évaluation",
                "col":"Couleur",
                "dob":"Date de Naissance",
            },
            "pagination":{
                "first":"Premier",
                "first_title":"Première Page",
                "last":"Dernier",
                "last_title":"Dernière Page",
                "prev":"Précédent",
                "prev_title":"Page Précédente",
                "next":"Suivant",
                "next_title":"Page Suivante",
                "all":"Toute",
            },
        },
        "de-de":{ //German language definition
            "columns":{
                "name":"Name",
                "progress":"Fortschritt",
                "gender":"Genre",
                "rating":"Geschlecht",
                "col":"Farbe",
                "dob":"Geburtsdatum",
            },
            "pagination":{
                "first":"Erste",
                "first_title":"Erste Seite",
                "last":"Letzte",
                "last_title":"Letzte Seite",
                "prev":"Vorige",
                "prev_title":"Vorige Seite",
                "next":"Nächste",
                "next_title":"Nächste Seite",
                "all":"Alle"
            },
        },
    },
    columns:[
        {title:"Name", field:"name"},
        {title:"Progress", field:"progress", sorter:"number"},
        {title:"Gender", field:"gender"},
        {title:"Rating", field:"rating"},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob"},
    ],
});

//set locale to French
document.getElementById("lang-french").addEventListener("click", function(){
    table.setLocale("fr-fr");
});

//set locale to German
document.getElementById("lang-german").addEventListener("click", function(){
    table.setLocale("de-de");
});

//set default locale
document.getElementById("lang-default").addEventListener("click", function(){
    table.setLocale("");
});

Defining Languages

You can store as many languages as you like, creating an object inside the langs object with a property of the locale code for that language. A list of locale codes can be found here.

At present there are three parts of the table that can be localised, the column headers, the header filter placeholder text and the pagination buttons. To localize the pagination buttons, create a pagination property inside your language object and give it the properties outlined below.

If you wish you can also localize column titles by adding a columns property to your language object. You should store a property of the field name of the column you wish to change, with a value of its title. Any fields that match this will use this title instead of the one provided by the column definition array.

var table = new Tabulator("#example-table", {
    locale:true,
    langs:{
        "en-gb":{
            "columns":{
                "name":"Name", //replace the title of column name with the value "Name"
            },
            "data":{
                "loading":"Loading", //data loader text
                "error":"Error", //data error text
            },
            "groups":{ //copy for the auto generated item count in group header
                "item":"item", //the singular  for item
                "items":"items", //the plural for items
            },
            "pagination":{
                "page_size":"Page Size", //label for the page size select element
                "page_title":"Show Page",//tooltip text for the numeric page button, appears in front of the page number (eg. "Show Page" will result in a tool tip of "Show Page 1" on the page 1 button)
                "first":"First", //text for the first page button
                "first_title":"First Page", //tooltip text for the first page button
                "last":"Last",
                "last_title":"Last Page",
                "prev":"Prev",
                "prev_title":"Prev Page",
                "next":"Next",
                "next_title":"Next Page",
                "all":"All",
            },
            "headerFilters":{
                "default":"filter column...", //default header filter placeholder text
                "columns":{
                    "name":"filter name...", //replace default header filter text for column name
                }
            }
        }
    },
});

Setting the Locale

You can set the current local in one of two ways. If you want to set it when the table is created, simply include the locale option in your Tabulator constructor. You can either pass in a string matching one of the language options you have defined, or pass in the boolean true which will cause Tabulator to auto-detect the browsers language settings from the navigator.language object.

var table = new Tabulator("#example-table", {
    locale:true, //auto detect the current language.
});

You can also set the language at any point after the table has loaded using the setLocale function, which takes the same range of values as the locale setup option mentioned above.

table.setLocale("fr"); //set locale to french

Note: if Tabulator cant find a match, it will try and find the next best thing. For example if you were trying to set the locale to Belgian French "fr-be", if that option had not been defined, then Tabulator would go on to look for an"fr" option instead. if no matching locale is found then Then tabulator will default to using its built-in English language text.

When a localization event has occurred , the localized callback will triggered, passing the current locale code and language object:

var table = new Tabulator("#example-table", {
    localized:function(locale, lang){
        //locale - a string representing the current locale
        //lang - the language object for the current locale
    },
});

Getting the Current Locale

It is possible to retrieve the locale code currently being used by Tabulator using the getLocale function:

table.getLocale(); //return string for current locale code

Extending Localization

As well as the default columns and pagination properties required in the language object, you can also add any additional properties you like to the object to be used in localising other elements.

var table = new Tabulator("#example-table", {
    langs:{
        "en-gb":{
            "custom":{
                "site_name":"What A Great Table Based Site!!!",
            },
            "columns":{
                "name":"Name", //replace the title of column name with the value "Name";
            },
            "pagination":{
                "first":"First", //text for the first page button
                "first_title":"First Page", //tooltip text for the first page button
                "last":"Last",
                "last_title":"Last Page",
                "prev":"Prev",
                "prev_title":"Prev Page",
                "next":"Next",
                "next_title":"Next Page",
                "all":"All",
            },
        }
    },
});

You can then access these at any point using the getLang function, which will return the language object for the currently active locale.

table.getLang(); //return current lang object