melondtable 1.15.3 → 1.16.4

package/dist/melondtable.cjs.js

@@ -710,7 +710,6 @@ function debounce(func, wait, options) {
       }
       if (maxing) {
         // Handle invocations in a tight loop.
-        clearTimeout(timerId);
         timerId = setTimeout(timerExpired, wait);
         return invokeFunc(lastCallTime);
       }
@@ -1903,6 +1902,16 @@ function numberSortAsc(a, b) {
 function stripHTML(html) {
     return html.replace(/<[^>]*>/g, '');
 }
+function format(str, args) {
+    if (!str) return str;
+
+    Object.keys(args).forEach(arg => {
+        let regex = new RegExp(`{(${arg})}`, 'g');
+        str = str.replace(regex, args[arg]);
+    });
+
+    return str;
+}
 
 class DataManager {
     constructor(options) {
@@ -2656,7 +2665,10 @@ class CellManager {
     bindCopyCellContents() {
         this.keyboard.on('ctrl+c', () => {
             const noOfCellsCopied = this.copyCellContents(this.$focusedCell, this.$selectionCursor);
-            const message = `${noOfCellsCopied} cell${noOfCellsCopied > 1 ? 's' : ''} copied`;
+            const message = this.instance.translate('{count} cells copied', {
+                count: noOfCellsCopied
+            });
+
             if (noOfCellsCopied) {
                 this.instance.showToastMessage(message, 2);
             }
@@ -3040,9 +3052,12 @@ class CellManager {
                 }
 
                 promise = valuePromise.then((value) => {
-                    const done = editor.setValue(value, rowIndex, col);
                     const oldValue = this.getCell(colIndex, rowIndex).content;
 
+                    if (oldValue === value) return false;
+
+                    const done = editor.setValue(value, rowIndex, col);
+
                     // update cell immediately
                     this.updateCell(colIndex, rowIndex, value);
                     $cell.focus();
@@ -3163,7 +3178,7 @@ class CellManager {
     }
 
     focusCellInDirection(direction) {
-        if (!this.$focusedCell) {
+        if (!this.$focusedCell || (this.$editingCell && ['left', 'right', 'up', 'down'].includes(direction))) {
             return false;
         } else if (this.$editingCell && ['tab', 'shift+tab'].includes(direction)) {
             this.deactivateEditing();
@@ -3573,7 +3588,11 @@ class ColumnManager {
 
         const onMouseMove = (e) => {
             if (!isDragging) return;
-            const finalWidth = startWidth + (e.pageX - startX);
+            let delta = e.pageX - startX;
+            if (this.options.direction === 'rtl') {
+                delta = -1 * delta;
+            }
+            const finalWidth = startWidth + delta;
             const {
                 colIndex
             } = $.data($resizingCell);
@@ -3974,7 +3993,10 @@ class RowManager {
         const checkedRows = this.getCheckedRows();
         const count = checkedRows.length;
         if (count > 0) {
-            this.bodyRenderer.showToastMessage(`${count} row${count > 1 ? 's' : ''} selected`);
+            let message = this.instance.translate('{count} rows selected', {
+                count: count
+            });
+            this.bodyRenderer.showToastMessage(message);
         } else {
             this.bodyRenderer.clearToastMessage();
         }
@@ -4166,7 +4188,8 @@ class RowManager {
         if (props.isFilter) {
             row = row.map(cell => (Object.assign({}, cell, {
                 content: this.getFilterInput({
-                    colIndex: cell.colIndex
+                    colIndex: cell.colIndex,
+                    name: cell.name
                 }),
                 isFilter: 1,
                 isHeader: undefined,
@@ -4188,8 +4211,10 @@ class RowManager {
     }
 
     getFilterInput(props) {
+        let title = `title="Filter based on ${props.name || 'Index'}"`;
         const dataAttr = makeDataAttributeString(props);
-        return `<input class="dt-filter dt-input" type="text" ${dataAttr} tabindex="1" />`;
+        return `<input class="dt-filter dt-input" type="text" ${dataAttr} tabindex="1" 
+            ${props.colIndex === 0 ? 'disabled' : title} />`;
     }
 
     selector(rowIndex) {
@@ -4198,7 +4223,7 @@ class RowManager {
 }
 
 var hyperlist = createCommonjsModule(function (module, exports) {
-(function(f){{module.exports=f();}})(function(){return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof commonjsRequire&&commonjsRequire;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t);}return n[i].exports}for(var u="function"==typeof commonjsRequire&&commonjsRequire,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(_dereq_,module,exports){
+(function(f){{module.exports=f();}})(function(){return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof commonjsRequire=="function"&&commonjsRequire;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r);}return n[o].exports}var i=typeof commonjsRequire=="function"&&commonjsRequire;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
 
 // Default configuration.
 
@@ -4208,25 +4233,16 @@ Object.defineProperty(exports, "__esModule", {
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 var defaultConfig = {
   width: '100%',
   height: '100%'
-
-  // Check for valid number.
-};var isNumber = function isNumber(input) {
-  return Number(input) === Number(input);
 };
 
-// Add a class to an element.
-var addClass = 'classList' in document.documentElement ? function (element, className) {
-  element.classList.add(className);
-} : function (element, className) {
-  var oldClass = element.getAttribute('class') || '';
-  element.setAttribute('class', oldClass + ' ' + className);
+// Check for valid number.
+var isNumber = function isNumber(input) {
+  return Number(input) === Number(input);
 };
 
 /**
@@ -4311,8 +4327,7 @@ var HyperList = function () {
         return;
       }
 
-      var diff = lastRepaint ? scrollTop - lastRepaint : 0;
-      if (!lastRepaint || diff < 0 || diff > _this._averageHeight) {
+      if (!lastRepaint || Math.abs(scrollTop - lastRepaint) > _this._averageHeight) {
         var rendered = _this._renderChunk();
 
         _this._lastRepaint = scrollTop;
@@ -4334,7 +4349,7 @@ var HyperList = function () {
   }, {
     key: 'refresh',
     value: function refresh(element, userProvidedConfig) {
-      var _scrollerStyle;
+      var _this2 = this;
 
       Object.assign(this._config, defaultConfig, userProvidedConfig);
 
@@ -4376,6 +4391,7 @@ var HyperList = function () {
       }).forEach(function (prop) {
         var value = config[prop];
         var isValueNumber = isNumber(value);
+        var isValuePercent = isValueNumber ? false : value.slice(-1) === '%';
 
         if (value && typeof value !== 'string' && typeof value !== 'number') {
           var msg = 'Invalid optional `' + prop + '`, expected string or number';
@@ -4383,52 +4399,45 @@ var HyperList = function () {
         } else if (isValueNumber) {
           config[prop] = value + 'px';
         }
-      });
 
-      var isHoriz = Boolean(config.horizontal);
-      var value = config[isHoriz ? 'width' : 'height'];
+        if (prop !== 'height') {
+          return;
+        }
 
-      if (value) {
-        var isValueNumber = isNumber(value);
-        var isValuePercent = isValueNumber ? false : value.slice(-1) === '%';
         // Compute the containerHeight as number
         var numberValue = isValueNumber ? value : parseInt(value.replace(/px|%/, ''), 10);
-        var innerSize = window[isHoriz ? 'innerWidth' : 'innerHeight'];
 
         if (isValuePercent) {
-          this._containerSize = innerSize * numberValue / 100;
+          _this2._containerHeight = window.innerHeight * numberValue / 100;
         } else {
-          this._containerSize = isNumber(value) ? value : numberValue;
+          _this2._containerHeight = isNumber(value) ? value : numberValue;
         }
-      }
-
-      var scrollContainer = config.scrollContainer;
-      var scrollerHeight = config.itemHeight * config.total;
-      var maxElementHeight = this._maxElementHeight;
-
-      if (scrollerHeight > maxElementHeight) {
-        console.warn(['HyperList: The maximum element height', maxElementHeight + 'px has', 'been exceeded; please reduce your item height.'].join(' '));
-      }
+      });
 
       // Decorate the container element with styles that will match
       // the user supplied configuration.
       var elementStyle = {
         width: '' + config.width,
-        height: scrollContainer ? scrollerHeight + 'px' : '' + config.height,
-        overflow: scrollContainer ? 'none' : 'auto',
+        height: '' + config.height,
+        overflow: 'auto',
         position: 'relative'
       };
 
       HyperList.mergeStyle(element, elementStyle);
 
-      if (scrollContainer) {
-        HyperList.mergeStyle(config.scrollContainer, { overflow: 'auto' });
+      var scrollerHeight = config.itemHeight * config.total;
+      var maxElementHeight = this._maxElementHeight;
+
+      if (scrollerHeight > maxElementHeight) {
+        console.warn(['HyperList: The maximum element height', maxElementHeight + 'px has', 'been exceeded; please reduce your item height.'].join(' '));
       }
 
-      var scrollerStyle = (_scrollerStyle = {
+      var scrollerStyle = {
         opacity: '0',
-        position: 'absolute'
-      }, _defineProperty(_scrollerStyle, isHoriz ? 'height' : 'width', '1px'), _defineProperty(_scrollerStyle, isHoriz ? 'width' : 'height', scrollerHeight + 'px'), _scrollerStyle);
+        position: 'absolute',
+        width: '1px',
+        height: scrollerHeight + 'px'
+      };
 
       HyperList.mergeStyle(scroller, scrollerStyle);
 
@@ -4437,10 +4446,6 @@ var HyperList = function () {
         element.appendChild(scroller);
       }
 
-      var padding = this._computeScrollPadding();
-      this._scrollPaddingBottom = padding.bottom;
-      this._scrollPaddingTop = padding.top;
-
       // Set the scroller instance.
       this._scroller = scroller;
       this._scrollHeight = this._computeScrollHeight();
@@ -4469,7 +4474,7 @@ var HyperList = function () {
         item = item.element;
 
         // The height isn't the same as predicted, compute positions again
-        if (height !== this._itemHeights[i]) {
+        if (height !== this._itemHeights) {
           this._itemHeights[i] = height;
           this._computePositions(i);
           this._scrollHeight = this._computeScrollHeight(i);
@@ -4482,13 +4487,15 @@ var HyperList = function () {
         throw new Error('Generator did not return a DOM Node for index: ' + i);
       }
 
-      addClass(item, config.rowClassName || 'vrow');
+      var oldClass = item.getAttribute('class') || '';
+      item.setAttribute('class', oldClass + ' ' + (config.rowClassName || 'vrow'));
 
-      var top = this._itemPositions[i] + this._scrollPaddingTop;
+      var top = this._itemPositions[i];
 
-      HyperList.mergeStyle(item, _defineProperty({
-        position: 'absolute'
-      }, config.horizontal ? 'left' : 'top', top + 'px'));
+      HyperList.mergeStyle(item, {
+        position: 'absolute',
+        top: top + 'px'
+      });
 
       return item;
     }
@@ -4501,7 +4508,7 @@ var HyperList = function () {
         return config.overrideScrollPosition();
       }
 
-      return this._element[config.horizontal ? 'scrollLeft' : 'scrollTop'];
+      return this._element.scrollTop;
     }
   }, {
     key: '_renderChunk',
@@ -4558,7 +4565,7 @@ var HyperList = function () {
   }, {
     key: '_computePositions',
     value: function _computePositions() {
-      var from = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+      var from = arguments.length <= 0 || arguments[0] === undefined ? 1 : arguments[0];
 
       var config = this._config;
       var total = config.total;
@@ -4583,21 +4590,20 @@ var HyperList = function () {
   }, {
     key: '_computeScrollHeight',
     value: function _computeScrollHeight() {
-      var _HyperList$mergeStyle2,
-          _this2 = this;
+      var _this3 = this;
 
       var config = this._config;
-      var isHoriz = Boolean(config.horizontal);
       var total = config.total;
       var scrollHeight = this._itemHeights.reduce(function (a, b) {
         return a + b;
-      }, 0) + this._scrollPaddingBottom + this._scrollPaddingTop;
+      }, 0);
 
-      HyperList.mergeStyle(this._scroller, (_HyperList$mergeStyle2 = {
+      HyperList.mergeStyle(this._scroller, {
         opacity: 0,
         position: 'absolute',
-        top: '0px'
-      }, _defineProperty(_HyperList$mergeStyle2, isHoriz ? 'height' : 'width', '1px'), _defineProperty(_HyperList$mergeStyle2, isHoriz ? 'width' : 'height', scrollHeight + 'px'), _HyperList$mergeStyle2));
+        width: '1px',
+        height: scrollHeight + 'px'
+      });
 
       // Calculate the height median
       var sortedItemHeights = this._itemHeights.slice(0).sort(function (a, b) {
@@ -4606,11 +4612,9 @@ var HyperList = function () {
       var middle = Math.floor(total / 2);
       var averageHeight = total % 2 === 0 ? (sortedItemHeights[middle] + sortedItemHeights[middle - 1]) / 2 : sortedItemHeights[middle];
 
-      var clientProp = isHoriz ? 'clientWidth' : 'clientHeight';
-      var element = config.scrollContainer ? config.scrollContainer : this._element;
-      var containerHeight = element[clientProp] ? element[clientProp] : this._containerSize;
+      var containerHeight = this._element.clientHeight ? this._element.clientHeight : this._containerHeight;
       this._screenItemsLen = Math.ceil(containerHeight / averageHeight);
-      this._containerSize = containerHeight;
+      this._containerHeight = containerHeight;
 
       // Cache 3 times the number of items that fit in the container viewport.
       this._cachedItemsLen = Math.max(this._cachedItemsLen || 0, this._screenItemsLen * 3);
@@ -4618,51 +4622,12 @@ var HyperList = function () {
 
       if (config.reverse) {
         window.requestAnimationFrame(function () {
-          if (isHoriz) {
-            _this2._element.scrollLeft = scrollHeight;
-          } else {
-            _this2._element.scrollTop = scrollHeight;
-          }
+          _this3._element.scrollTop = scrollHeight;
         });
       }
 
       return scrollHeight;
     }
-  }, {
-    key: '_computeScrollPadding',
-    value: function _computeScrollPadding() {
-      var config = this._config;
-      var isHoriz = Boolean(config.horizontal);
-      var isReverse = config.reverse;
-      var styles = window.getComputedStyle(this._element);
-
-      var padding = function padding(location) {
-        var cssValue = styles.getPropertyValue('padding-' + location);
-        return parseInt(cssValue, 10) || 0;
-      };
-
-      if (isHoriz && isReverse) {
-        return {
-          bottom: padding('left'),
-          top: padding('right')
-        };
-      } else if (isHoriz) {
-        return {
-          bottom: padding('right'),
-          top: padding('left')
-        };
-      } else if (isReverse) {
-        return {
-          bottom: padding('top'),
-          top: padding('bottom')
-        };
-      } else {
-        return {
-          bottom: padding('bottom'),
-          top: padding('top')
-        };
-      }
-    }
   }, {
     key: '_getFrom',
     value: function _getFrom(scrollTop) {
@@ -4679,7 +4644,7 @@ var HyperList = function () {
     value: function _getReverseFrom(scrollTop) {
       var i = this._config.total - 1;
 
-      while (i > 0 && this._itemPositions[i] < scrollTop + this._containerSize) {
+      while (i > 0 && this._itemPositions[i] < scrollTop + this._containerHeight) {
         i--;
       }
 
@@ -5030,11 +4995,6 @@ class Style {
 
             let naturalWidth = $.style($('.dt-cell__content', $cell), 'width');
 
-            if (column.id === '_rowIndex') {
-                naturalWidth = this.getRowIndexColumnWidth();
-                column.width = naturalWidth;
-            }
-
             if (typeof naturalWidth === 'number' && naturalWidth >= column.naturalWidth) {
                 column.naturalWidth = naturalWidth;
             } else {
@@ -5083,6 +5043,9 @@ class Style {
                     if (!column.width) {
                         column.width = column.naturalWidth;
                     }
+                    if (column.id === '_rowIndex') {
+                        column.width = this.getRowIndexColumnWidth();
+                    }
                     if (column.width < this.options.minimumColumnWidth) {
                         column.width = this.options.minimumColumnWidth;
                     }
@@ -5268,6 +5231,83 @@ class Keyboard {
     }
 }
 
+var en = {
+	"Sort Ascending": "Sort Ascending",
+	"Sort Descending": "Sort Descending",
+	"Reset sorting": "Reset sorting",
+	"Remove column": "Remove column",
+	"No Data": "No Data",
+	"{count} cells copied": {"1":"{count} cell copied","default":"{count} cells copied"},
+	"{count} rows selected": {"1":"{count} row selected","default":"{count} rows selected"}
+};
+
+var de = {
+	"Sort Ascending": "Aufsteigend sortieren",
+	"Sort Descending": "Absteigend sortieren",
+	"Reset sorting": "Sortierung zurücksetzen",
+	"Remove column": "Spalte entfernen",
+	"No Data": "Keine Daten",
+	"{count} cells copied": {"1":"{count} Zelle kopiert","default":"{count} Zellen kopiert"},
+	"{count} rows selected": {"1":"{count} Zeile ausgewählt","default":"{count} Zeilen ausgewählt"}
+};
+
+var fr = {
+	"Sort Ascending": "Trier par ordre croissant",
+	"Sort Descending": "Trier par ordre décroissant",
+	"Reset sorting": "Réinitialiser le tri",
+	"Remove column": "Supprimer colonne",
+	"No Data": "Pas de données",
+	"{count} cells copied": {"1":"{count} cellule copiée","default":"{count} cellules copiées"},
+	"{count} rows selected": {"1":"{count} ligne sélectionnée","default":"{count} lignes sélectionnées"}
+};
+
+var it = {
+	"Sort Ascending": "Ordinamento ascendente",
+	"Sort Descending": "Ordinamento decrescente",
+	"Reset sorting": "Azzeramento ordinamento",
+	"Remove column": "Rimuovi colonna",
+	"No Data": "Nessun dato",
+	"{count} cells copied": {"1":"Copiato {count} cella","default":"{count} celle copiate"},
+	"{count} rows selected": {"1":"{count} linea selezionata","default":"{count} linee selezionate"}
+};
+
+function getTranslations() {
+    return {
+        en,
+        de,
+        fr,
+        it,
+    };
+}
+
+class TranslationManager {
+    constructor(language) {
+        this.language = language;
+        this.translations = getTranslations();
+    }
+
+    addTranslations(translations) {
+        this.translations = Object.assign(this.translations, translations);
+    }
+
+    translate(sourceText, args) {
+        let translation = (this.translations[this.language] &&
+            this.translations[this.language][sourceText]) || sourceText;
+
+        if (typeof translation === 'object') {
+            translation = args && args.count ?
+                this.getPluralizedTranslation(translation, args.count) :
+                sourceText;
+        }
+
+        return format(translation, args || {});
+    }
+
+    getPluralizedTranslation(translations, count) {
+        return translations[count] || translations['default'];
+    }
+}
+
 function filterRows(rows, filters) {
     let filteredRowIndices = [];
 
@@ -5460,74 +5500,76 @@ function guessFilter(keyword = '') {
     };
 }
 
-var DEFAULT_OPTIONS = {
-    columns: [],
-    data: [],
-    dropdownButton: icons.chevronDown,
-    headerDropdown: [
-        {
-            label: 'Sort Ascending',
-            action: function (column) {
-                this.sortColumn(column.colIndex, 'asc');
+function getDefaultOptions(instance) {
+    return {
+        columns: [],
+        data: [],
+        dropdownButton: icons.chevronDown,
+        headerDropdown: [
+            {
+                label: instance.translate('Sort Ascending'),
+                action: function (column) {
+                    this.sortColumn(column.colIndex, 'asc');
+                }
+            },
+            {
+                label: instance.translate('Sort Descending'),
+                action: function (column) {
+                    this.sortColumn(column.colIndex, 'desc');
+                }
+            },
+            {
+                label: instance.translate('Reset sorting'),
+                action: function (column) {
+                    this.sortColumn(column.colIndex, 'none');
+                }
+            },
+            {
+                label: instance.translate('Remove column'),
+                action: function (column) {
+                    this.removeColumn(column.colIndex);
+                }
             }
+        ],
+        events: {
+            onRemoveColumn(column) {},
+            onSwitchColumn(column1, column2) {},
+            onSortColumn(column) {},
+            onCheckRow(row) {},
+            onDestroy() {}
         },
-        {
-            label: 'Sort Descending',
-            action: function (column) {
-                this.sortColumn(column.colIndex, 'desc');
-            }
+        hooks: {
+            columnTotal: null
         },
-        {
-            label: 'Reset sorting',
-            action: function (column) {
-                this.sortColumn(column.colIndex, 'none');
-            }
+        sortIndicator: {
+            asc: '↑',
+            desc: '↓',
+            none: ''
         },
-        {
-            label: 'Remove column',
-            action: function (column) {
-                this.removeColumn(column.colIndex);
-            }
-        }
-    ],
-    events: {
-        onRemoveColumn(column) {},
-        onSwitchColumn(column1, column2) {},
-        onSortColumn(column) {},
-        onCheckRow(row) {},
-        onDestroy() {}
-    },
-    hooks: {
-        columnTotal: null
-    },
-    sortIndicator: {
-        asc: '↑',
-        desc: '↓',
-        none: ''
-    },
-    overrideComponents: {
-        // ColumnManager: CustomColumnManager
-    },
-    filterRows: filterRows,
-    freezeMessage: '',
-    getEditor: null,
-    serialNoColumn: true,
-    checkboxColumn: false,
-    clusterize: true,
-    logs: false,
-    layout: 'fixed', // fixed, fluid, ratio
-    noDataMessage: 'No Data',
-    cellHeight: 40,
-    minimumColumnWidth: 30,
-    inlineFilters: false,
-    treeView: false,
-    checkedRowStatus: true,
-    dynamicRowHeight: false,
-    pasteFromClipboard: false,
-    showTotalRow: false,
-    direction: 'ltr',
-    disableReorderColumn: false
-};
+        overrideComponents: {
+            // ColumnManager: CustomColumnManager
+        },
+        filterRows: filterRows,
+        freezeMessage: '',
+        getEditor: null,
+        serialNoColumn: true,
+        checkboxColumn: false,
+        clusterize: true,
+        logs: false,
+        layout: 'fixed', // fixed, fluid, ratio
+        noDataMessage: instance.translate('No Data'),
+        cellHeight: 40,
+        minimumColumnWidth: 30,
+        inlineFilters: false,
+        treeView: false,
+        checkedRowStatus: true,
+        dynamicRowHeight: false,
+        pasteFromClipboard: false,
+        showTotalRow: false,
+        direction: 'ltr',
+        disableReorderColumn: false
+    };
+}
 
 let defaultComponents = {
     DataManager,
@@ -5552,6 +5594,8 @@ class DataTable {
             throw new Error('Invalid argument given for `wrapper`');
         }
 
+        this.initializeTranslations(options);
+        this.setDefaultOptions();
         this.buildOptions(options);
         this.prepare();
         this.initializeComponents();
@@ -5562,23 +5606,36 @@ class DataTable {
         }
     }
 
+    initializeTranslations(options) {
+        this.language = options.language || 'en';
+        this.translationManager = new TranslationManager(this.language);
+
+        if (options.translations) {
+            this.translationManager.addTranslations(options.translations);
+        }
+    }
+
+    setDefaultOptions() {
+        this.DEFAULT_OPTIONS = getDefaultOptions(this);
+    }
+
     buildOptions(options) {
         this.options = this.options || {};
 
         this.options = Object.assign(
-            {}, DEFAULT_OPTIONS,
+            {}, this.DEFAULT_OPTIONS,
             this.options || {}, options
         );
 
         options.headerDropdown = options.headerDropdown || [];
         this.options.headerDropdown = [
-            ...DEFAULT_OPTIONS.headerDropdown,
+            ...this.DEFAULT_OPTIONS.headerDropdown,
             ...options.headerDropdown
         ];
 
         // custom user events
         this.events = Object.assign(
-            {}, DEFAULT_OPTIONS.events,
+            {}, this.DEFAULT_OPTIONS.events,
             this.options.events || {},
             options.events || {}
         );
@@ -5764,6 +5821,10 @@ class DataTable {
             console.log.apply(console, arguments);
         }
     }
+
+    translate(str, args) {
+        return this.translationManager.translate(str, args);
+    }
 }
 
 DataTable.instances = 0;
@@ -5774,15 +5835,15 @@ var description = "A modern datatable library for the web";
 var main = "dist/melondtable.cjs.js";
 var unpkg = "dist/melondtable.min.js";
 var jsdelivr = "dist/melondtable.min.js";
-var scripts = {"start":"yarn run dev","build":"rollup -c && NODE_ENV=production rollup -c","dev":"rollup -c -w","cy:server":"http-server -p 8989","cy:open":"cypress open","cy:run":"cypress run","test":"start-server-and-test cy:server http://localhost:8989 cy:run","test-local":"start-server-and-test cy:server http://localhost:8989 cy:open","travis-deploy-once":"travis-deploy-once","semantic-release":"semantic-release","lint":"eslint src","commit":"npx git-cz"};
+var scripts = {"start":"yarn run dev","build":"rollup -c && NODE_ENV=production rollup -c","dev":"rollup -c -w","cy:server":"http-server -p 8989","cy:open":"cypress open","cy:run":"cypress run","test":"start-server-and-test cy:server http://localhost:8989 cy:run","test-local":"start-server-and-test cy:server http://localhost:8989 cy:open","travis-deploy-once":"travis-deploy-once","semantic-release":"semantic-release","lint":"eslint src","lint-and-build":"yarn lint && yarn build","commit":"npx git-cz"};
 var files = ["dist","src"];
-var devDependencies = {"autoprefixer":"^9.0.0","chai":"3.5.0","cypress":"3.0.1","cz-conventional-changelog":"^2.1.0","deepmerge":"^2.0.1","eslint":"^5.0.1","eslint-config-airbnb":"^16.1.0","eslint-config-airbnb-base":"^12.1.0","eslint-plugin-import":"^2.11.0","http-server":"^0.11.1","mocha":"3.3.0","postcss-custom-properties":"^7.0.0","postcss-nested":"^3.0.0","rollup":"^0.59.4","rollup-plugin-commonjs":"^8.3.0","rollup-plugin-eslint":"^4.0.0","rollup-plugin-json":"^2.3.0","rollup-plugin-node-resolve":"^3.0.3","rollup-plugin-postcss":"^1.2.8","rollup-plugin-uglify-es":"^0.0.1","semantic-release":"^15.6.3","start-server-and-test":"^1.4.1","travis-deploy-once":"^5.0.1"};
+var devDependencies = {"autoprefixer":"^9.0.0","chai":"3.5.0","cypress":"^9.2.0","cz-conventional-changelog":"^2.1.0","deepmerge":"^2.0.1","eslint":"^5.0.1","eslint-config-airbnb":"^16.1.0","eslint-config-airbnb-base":"^12.1.0","eslint-plugin-import":"^2.11.0","http-server":"^0.11.1","mocha":"3.3.0","postcss-custom-properties":"^7.0.0","postcss-nested":"^3.0.0","rollup":"^0.59.4","rollup-plugin-commonjs":"^8.3.0","rollup-plugin-eslint":"^4.0.0","rollup-plugin-json":"^2.3.0","rollup-plugin-node-resolve":"^3.0.3","rollup-plugin-postcss":"^1.2.8","rollup-plugin-uglify-es":"^0.0.1","semantic-release":"^17.1.1","start-server-and-test":"^1.4.1","travis-deploy-once":"^5.0.1"};
 var repository = {"type":"git","url":"https://github.com/amonak/melondtable.git"};
 var keywords = ["datatable","data","grid","table"];
 var author = "Faris Ansari";
 var license = "MIT";
 var bugs = {"url":"https://github.com/amonak/datatable/issues"};
-var homepage = "https://alphamonak.com/melondtable";
+var homepage = "https://devel.monakerp.com/datatable";
 var dependencies = {"hyperlist":"^1.0.0-beta","lodash":"^4.17.5","sortablejs":"^1.7.0"};
 var config = {"commitizen":{"path":"cz-conventional-changelog"}};
 var packageJson = {