melondtable 1.19.0 → 1.21.2

package/dist/melondtable.js

@@ -298,13 +298,6 @@ var DataTable = (function (Sortable) {
 
     var _root = root;
 
-    var _root$1 = /*#__PURE__*/Object.freeze({
-        default: _root,
-        __moduleExports: _root
-    });
-
-    var root$1 = ( _root$1 && _root ) || _root$1;
-
     /**
      * Gets the timestamp of the number of milliseconds that have elapsed since
      * the Unix epoch (1 January 1970 00:00:00 UTC).
@@ -322,13 +315,13 @@ var DataTable = (function (Sortable) {
      * // => Logs the number of milliseconds it took for the deferred invocation.
      */
     var now = function() {
-      return root$1.Date.now();
+      return _root.Date.now();
     };
 
     var now_1 = now;
 
     /** Built-in value references. */
-    var Symbol = root$1.Symbol;
+    var Symbol = _root.Symbol;
 
     var _Symbol = Symbol;
 
@@ -376,11 +369,6 @@ var DataTable = (function (Sortable) {
 
     var _getRawTag = getRawTag;
 
-    var _getRawTag$1 = /*#__PURE__*/Object.freeze({
-        default: _getRawTag,
-        __moduleExports: _getRawTag
-    });
-
     /** Used for built-in method references. */
     var objectProto$1 = Object.prototype;
 
@@ -404,8 +392,6 @@ var DataTable = (function (Sortable) {
 
     var _objectToString = objectToString;
 
-    var getRawTag$1 = ( _getRawTag$1 && _getRawTag ) || _getRawTag$1;
-
     /** `Object#toString` result references. */
     var nullTag = '[object Null]',
         undefinedTag = '[object Undefined]';
@@ -425,7 +411,7 @@ var DataTable = (function (Sortable) {
         return value === undefined ? undefinedTag : nullTag;
       }
       return (symToStringTag$1 && symToStringTag$1 in Object(value))
-        ? getRawTag$1(value)
+        ? _getRawTag(value)
         : _objectToString(value);
     }
 
@@ -488,13 +474,6 @@ var DataTable = (function (Sortable) {
 
     var isSymbol_1 = isSymbol;
 
-    var isSymbol$1 = /*#__PURE__*/Object.freeze({
-        default: isSymbol_1,
-        __moduleExports: isSymbol_1
-    });
-
-    var isSymbol$2 = ( isSymbol$1 && isSymbol_1 ) || isSymbol$1;
-
     /** Used as references for various `Number` constants. */
     var NAN = 0 / 0;
 
@@ -540,7 +519,7 @@ var DataTable = (function (Sortable) {
       if (typeof value == 'number') {
         return value;
       }
-      if (isSymbol$2(value)) {
+      if (isSymbol_1(value)) {
         return NAN;
       }
       if (isObject_1(value)) {
@@ -849,13 +828,20 @@ var DataTable = (function (Sortable) {
     var isFunction_1 = isFunction;
 
     /** Used to detect overreaching core-js shims. */
-    var coreJsData = root$1['__core-js_shared__'];
+    var coreJsData = _root['__core-js_shared__'];
 
     var _coreJsData = coreJsData;
 
+    var _coreJsData$1 = /*#__PURE__*/Object.freeze({
+        default: _coreJsData,
+        __moduleExports: _coreJsData
+    });
+
+    var coreJsData$1 = ( _coreJsData$1 && _coreJsData ) || _coreJsData$1;
+
     /** Used to detect methods masquerading as native. */
     var maskSrcKey = (function() {
-      var uid = /[^.]+$/.exec(_coreJsData && _coreJsData.keys && _coreJsData.keys.IE_PROTO || '');
+      var uid = /[^.]+$/.exec(coreJsData$1 && coreJsData$1.keys && coreJsData$1.keys.IE_PROTO || '');
       return uid ? ('Symbol(src)_1.' + uid) : '';
     }());
 
@@ -942,11 +928,6 @@ var DataTable = (function (Sortable) {
 
     var _baseIsNative = baseIsNative;
 
-    var _baseIsNative$1 = /*#__PURE__*/Object.freeze({
-        default: _baseIsNative,
-        __moduleExports: _baseIsNative
-    });
-
     /**
      * Gets the value at `key` of `object`.
      *
@@ -961,8 +942,6 @@ var DataTable = (function (Sortable) {
 
     var _getValue = getValue;
 
-    var baseIsNative$1 = ( _baseIsNative$1 && _baseIsNative ) || _baseIsNative$1;
-
     /**
      * Gets the native function at `key` of `object`.
      *
@@ -973,7 +952,7 @@ var DataTable = (function (Sortable) {
      */
     function getNative(object, key) {
       var value = _getValue(object, key);
-      return baseIsNative$1(value) ? value : undefined;
+      return _baseIsNative(value) ? value : undefined;
     }
 
     var _getNative = getNative;
@@ -1129,6 +1108,11 @@ var DataTable = (function (Sortable) {
 
     var _listCacheClear = listCacheClear;
 
+    var _listCacheClear$1 = /*#__PURE__*/Object.freeze({
+        default: _listCacheClear,
+        __moduleExports: _listCacheClear
+    });
+
     /**
      * Performs a
      * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
@@ -1187,6 +1171,13 @@ var DataTable = (function (Sortable) {
 
     var _assocIndexOf = assocIndexOf;
 
+    var _assocIndexOf$1 = /*#__PURE__*/Object.freeze({
+        default: _assocIndexOf,
+        __moduleExports: _assocIndexOf
+    });
+
+    var assocIndexOf$1 = ( _assocIndexOf$1 && _assocIndexOf ) || _assocIndexOf$1;
+
     /** Used for built-in method references. */
     var arrayProto = Array.prototype;
 
@@ -1204,7 +1195,7 @@ var DataTable = (function (Sortable) {
      */
     function listCacheDelete(key) {
       var data = this.__data__,
-          index = _assocIndexOf(data, key);
+          index = assocIndexOf$1(data, key);
 
       if (index < 0) {
         return false;
@@ -1232,7 +1223,7 @@ var DataTable = (function (Sortable) {
      */
     function listCacheGet(key) {
       var data = this.__data__,
-          index = _assocIndexOf(data, key);
+          index = assocIndexOf$1(data, key);
 
       return index < 0 ? undefined : data[index][1];
     }
@@ -1249,7 +1240,7 @@ var DataTable = (function (Sortable) {
      * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
      */
     function listCacheHas(key) {
-      return _assocIndexOf(this.__data__, key) > -1;
+      return assocIndexOf$1(this.__data__, key) > -1;
     }
 
     var _listCacheHas = listCacheHas;
@@ -1266,7 +1257,7 @@ var DataTable = (function (Sortable) {
      */
     function listCacheSet(key, value) {
       var data = this.__data__,
-          index = _assocIndexOf(data, key);
+          index = assocIndexOf$1(data, key);
 
       if (index < 0) {
         ++this.size;
@@ -1279,6 +1270,8 @@ var DataTable = (function (Sortable) {
 
     var _listCacheSet = listCacheSet;
 
+    var listCacheClear$1 = ( _listCacheClear$1 && _listCacheClear ) || _listCacheClear$1;
+
     /**
      * Creates an list cache object.
      *
@@ -1298,7 +1291,7 @@ var DataTable = (function (Sortable) {
     }
 
     // Add methods to `ListCache`.
-    ListCache.prototype.clear = _listCacheClear;
+    ListCache.prototype.clear = listCacheClear$1;
     ListCache.prototype['delete'] = _listCacheDelete;
     ListCache.prototype.get = _listCacheGet;
     ListCache.prototype.has = _listCacheHas;
@@ -1306,17 +1299,17 @@ var DataTable = (function (Sortable) {
 
     var _ListCache = ListCache;
 
+    var _ListCache$1 = /*#__PURE__*/Object.freeze({
+        default: _ListCache,
+        __moduleExports: _ListCache
+    });
+
     /* Built-in method references that are verified to be native. */
-    var Map = _getNative(root$1, 'Map');
+    var Map = _getNative(_root, 'Map');
 
     var _Map = Map;
 
-    var _Map$1 = /*#__PURE__*/Object.freeze({
-        default: _Map,
-        __moduleExports: _Map
-    });
-
-    var Map$1 = ( _Map$1 && _Map ) || _Map$1;
+    var ListCache$1 = ( _ListCache$1 && _ListCache ) || _ListCache$1;
 
     /**
      * Removes all key-value entries from the map.
@@ -1329,7 +1322,7 @@ var DataTable = (function (Sortable) {
       this.size = 0;
       this.__data__ = {
         'hash': new _Hash,
-        'map': new (Map$1 || _ListCache),
+        'map': new (_Map || ListCache$1),
         'string': new _Hash
       };
     }
@@ -1352,6 +1345,13 @@ var DataTable = (function (Sortable) {
 
     var _isKeyable = isKeyable;
 
+    var _isKeyable$1 = /*#__PURE__*/Object.freeze({
+        default: _isKeyable,
+        __moduleExports: _isKeyable
+    });
+
+    var isKeyable$1 = ( _isKeyable$1 && _isKeyable ) || _isKeyable$1;
+
     /**
      * Gets the data for `map`.
      *
@@ -1362,7 +1362,7 @@ var DataTable = (function (Sortable) {
      */
     function getMapData(map, key) {
       var data = map.__data__;
-      return _isKeyable(key)
+      return isKeyable$1(key)
         ? data[typeof key == 'string' ? 'string' : 'hash']
         : data.map;
     }
@@ -1484,6 +1484,11 @@ var DataTable = (function (Sortable) {
 
     var _setCacheAdd = setCacheAdd;
 
+    var _setCacheAdd$1 = /*#__PURE__*/Object.freeze({
+        default: _setCacheAdd,
+        __moduleExports: _setCacheAdd
+    });
+
     /**
      * Checks if `value` is in the array cache.
      *
@@ -1499,6 +1504,8 @@ var DataTable = (function (Sortable) {
 
     var _setCacheHas = setCacheHas;
 
+    var setCacheAdd$1 = ( _setCacheAdd$1 && _setCacheAdd ) || _setCacheAdd$1;
+
     /**
      *
      * Creates an array cache object to store unique values.
@@ -1518,7 +1525,7 @@ var DataTable = (function (Sortable) {
     }
 
     // Add methods to `SetCache`.
-    SetCache.prototype.add = SetCache.prototype.push = _setCacheAdd;
+    SetCache.prototype.add = SetCache.prototype.push = setCacheAdd$1;
     SetCache.prototype.has = _setCacheHas;
 
     var _SetCache = SetCache;
@@ -1585,13 +1592,6 @@ var DataTable = (function (Sortable) {
 
     var _strictIndexOf = strictIndexOf;
 
-    var _strictIndexOf$1 = /*#__PURE__*/Object.freeze({
-        default: _strictIndexOf,
-        __moduleExports: _strictIndexOf
-    });
-
-    var strictIndexOf$1 = ( _strictIndexOf$1 && _strictIndexOf ) || _strictIndexOf$1;
-
     /**
      * The base implementation of `_.indexOf` without `fromIndex` bounds checks.
      *
@@ -1603,7 +1603,7 @@ var DataTable = (function (Sortable) {
      */
     function baseIndexOf(array, value, fromIndex) {
       return value === value
-        ? strictIndexOf$1(array, value, fromIndex)
+        ? _strictIndexOf(array, value, fromIndex)
         : _baseFindIndex(array, _baseIsNaN, fromIndex);
     }
 
@@ -1663,7 +1663,7 @@ var DataTable = (function (Sortable) {
     var _cacheHas = cacheHas;
 
     /* Built-in method references that are verified to be native. */
-    var Set$1 = _getNative(root$1, 'Set');
+    var Set$1 = _getNative(_root, 'Set');
 
     var _Set = Set$1;
 
@@ -1786,13 +1786,6 @@ var DataTable = (function (Sortable) {
 
     var _baseUniq = baseUniq;
 
-    var _baseUniq$1 = /*#__PURE__*/Object.freeze({
-        default: _baseUniq,
-        __moduleExports: _baseUniq
-    });
-
-    var baseUniq$1 = ( _baseUniq$1 && _baseUniq ) || _baseUniq$1;
-
     /**
      * Creates a duplicate-free version of an array, using
      * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
@@ -1812,7 +1805,7 @@ var DataTable = (function (Sortable) {
      * // => [2, 1]
      */
     function uniq(array) {
-      return (array && array.length) ? baseUniq$1(array) : [];
+      return (array && array.length) ? _baseUniq(array) : [];
     }
 
     var uniq_1 = uniq;
@@ -2033,6 +2026,7 @@ var DataTable = (function (Sortable) {
                     sortable: false,
                     focusable: false,
                     dropdown: false,
+                    sticky: true,
                     width: 32
                 };
                 this.columns.push(cell);
@@ -2041,16 +2035,14 @@ var DataTable = (function (Sortable) {
             if (this.options.serialNoColumn && !this.hasColumnById('_rowIndex')) {
                 let cell = {
                     id: '_rowIndex',
-                    content: '',
+                    content: this.options.serialNoColumnLabel || '',
                     align: 'center',
                     editable: false,
-                    resizable: false,
+                    resizable: true,
                     focusable: false,
-                    dropdown: false
+                    dropdown: false,
+                    sticky: true
                 };
-                if (this.options.data.length > 1000) {
-                    cell.resizable = true;
-                }
                 this.columns.push(cell);
             }
         }
@@ -2255,14 +2247,18 @@ var DataTable = (function (Sortable) {
                 }
             }
 
+            const sortValue = cell => {
+                const hook = cell.column && cell.column.sortValue;
+                const value = hook ? hook(cell) : cell.content;
+                return value == null ? '' : value;
+            };
+
             this.rowViewOrder.sort((a, b) => {
                 const aIndex = a;
                 const bIndex = b;
 
-                let aContent = this.getCell(colIndex, a).content;
-                let bContent = this.getCell(colIndex, b).content;
-                aContent = aContent == null ? '' : aContent;
-                bContent = bContent == null ? '' : bContent;
+                const aContent = sortValue(this.getCell(colIndex, a));
+                const bContent = sortValue(this.getCell(colIndex, b));
 
                 if (sortOrder === 'none') {
                     return aIndex - bIndex;
@@ -2634,6 +2630,7 @@ var DataTable = (function (Sortable) {
             this.bindKeyboardSelection();
             this.bindCopyCellContents();
             this.bindMouseEvents();
+            this.bindWheelEvents();
             this.bindTreeEvents();
         }
 
@@ -2682,6 +2679,7 @@ var DataTable = (function (Sortable) {
                 }
 
                 this.focusCell($cell);
+                sessionStorage.setItem('dt-last-nav-method', 'key');
                 return true;
             };
 
@@ -2790,6 +2788,12 @@ var DataTable = (function (Sortable) {
             $.on(this.bodyScrollable, 'mousemove', '.dt-cell', throttle$1(selectArea, 50));
         }
 
+        bindWheelEvents() {
+            $.on(this.bodyScrollable, 'wheel', (e) => {
+                sessionStorage.setItem('dt-last-nav-method', 'scroll');
+            });
+        }
+
         bindTreeEvents() {
             $.on(this.bodyScrollable, 'click', '.dt-tree-node__toggle', (e, $toggle) => {
                 const $cell = $.closest('.dt-cell', $toggle);
@@ -2914,11 +2918,13 @@ var DataTable = (function (Sortable) {
             // this function is called after hyperlist renders the rows after scroll,
             // focusCell calls clearSelection which resets the area selection
             // so a flag to skip it
-            // we also skip DOM focus and scroll to cell
-            // because it fights with the user scroll
+            // we skip scroll to cell
+            // and also skip DOM focus (if user is scrolling) because it fights with the user scroll
+            const skipDOMFocus = sessionStorage.getItem('dt-last-nav-method') !== 'key';
+
             this.focusCell($cell, {
+                skipDOMFocus,
                 skipClearSelection: 1,
-                skipDOMFocus: 1,
                 skipScrollToCell: 1
             });
         }
@@ -3315,6 +3321,7 @@ var DataTable = (function (Sortable) {
             }
 
             this.focusCell($cell);
+            sessionStorage.setItem('dt-last-nav-method', 'key');
             return true;
         }
 
@@ -3413,8 +3420,15 @@ var DataTable = (function (Sortable) {
             });
 
             const row = this.datamanager.getRow(rowIndex);
+            const column = cell.column || this.datamanager.getColumn(colIndex) || {};
 
             const isBodyCell = !(isHeader || isFilter || isTotalRow);
+            const isSticky = Boolean(column.sticky);
+            const stickyColumns = this.datamanager.getColumns().filter(col => col.sticky);
+            const lastStickyColumn = stickyColumns[stickyColumns.length - 1];
+            const isLastStickyColumn = isSticky &&
+                lastStickyColumn &&
+                lastStickyColumn.colIndex === colIndex;
 
             const className = [
                 'dt-cell',
@@ -3424,7 +3438,10 @@ var DataTable = (function (Sortable) {
                 isHeader ? 'dt-cell--header' : '',
                 isHeader ? `dt-cell--header-${colIndex}` : '',
                 isFilter ? 'dt-cell--filter' : '',
-                isBodyCell && (row && row.meta.isTreeNodeClose) ? 'dt-cell--tree-close' : ''
+                isBodyCell && (row && row.meta.isTreeNodeClose) ? 'dt-cell--tree-close' : '',
+                isSticky ? 'dt-cell--sticky' : '',
+                isSticky && !isBodyCell ? 'dt-cell--sticky-top' : '',
+                isLastStickyColumn ? 'dt-cell--sticky-last' : ''
             ].join(' ');
 
             return `
@@ -3622,7 +3639,7 @@ var DataTable = (function (Sortable) {
             });
 
             $.on(this.$dropdownList, 'click', '.dt-dropdown__list-item', (e, $item) => {
-                if (!this._dropdownActiveColIndex) return;
+                if (this._dropdownActiveColIndex == null) return;
                 const dropdownItems = this.options.headerDropdown;
                 const { index } = $.data($item);
                 const colIndex = this._dropdownActiveColIndex;
@@ -3637,6 +3654,11 @@ var DataTable = (function (Sortable) {
                 _this.hideDropdown();
             }
 
+            this.stickDropdownIndex = this.options.headerDropdown
+                .findIndex(item => item.stickyAction === 'stick');
+            this.unstickDropdownIndex = this.options.headerDropdown
+                .findIndex(item => item.stickyAction === 'unstick');
+
             this.hideDropdown();
         }
 
@@ -3653,6 +3675,7 @@ var DataTable = (function (Sortable) {
             const $cell = $.closest('.dt-cell', e.target);
             const { colIndex } = $.data($cell);
             this._dropdownActiveColIndex = colIndex;
+            this.updateStickyDropdownItems(this.getColumn(colIndex));
         }
 
         hideDropdown() {
@@ -3688,12 +3711,6 @@ var DataTable = (function (Sortable) {
                 document.body.classList.remove('dt-resize');
                 if (!$resizingCell) return;
                 isDragging = false;
-
-                const {
-                    colIndex
-                } = $.data($resizingCell);
-                this.setColumnWidth(colIndex);
-                this.style.setBodyStyle();
                 $resizingCell = null;
             };
             $.on(document.body, 'mouseup', onMouseup);
@@ -3721,6 +3738,9 @@ var DataTable = (function (Sortable) {
                     width: finalWidth
                 });
                 this.setColumnHeaderWidth(colIndex);
+                this.setColumnWidth(colIndex);
+                this.style.refreshStickyColumns();
+                this.style.setBodyStyle();
             };
             $.on(document.body, 'mousemove', onMouseMove);
             this.instance.on('onDestroy', () => {
@@ -3757,6 +3777,7 @@ var DataTable = (function (Sortable) {
                 this.datamanager.updateColumn(colIndex, { width });
                 this.setColumnHeaderWidth(colIndex);
                 this.setColumnWidth(colIndex);
+                this.style.refreshStickyColumns();
             });
         }
 
@@ -3833,6 +3854,20 @@ var DataTable = (function (Sortable) {
                 });
         }
 
+        setColumnSticky(colIndex, sticky) {
+            const column = this.getColumn(colIndex);
+            if (!column || column.sticky === sticky) {
+                return;
+            }
+
+            this.instance.freeze();
+            this.datamanager.updateColumn(colIndex, { sticky });
+
+            this.refreshHeader();
+            this.rowmanager.refreshRows()
+                .then(() => this.instance.unfreeze());
+        }
+
         switchColumn(oldIndex, newIndex) {
             this.instance.freeze();
             this.datamanager.switchColumn(oldIndex, newIndex)
@@ -4022,6 +4057,23 @@ var DataTable = (function (Sortable) {
         toggleDropdownItem(index) {
             $('.dt-dropdown__list', this.instance.dropdownContainer).children[index].classList.toggle('dt-hidden');
         }
+
+        updateStickyDropdownItems(column) {
+            if (!column) return;
+            if (this.stickDropdownIndex === -1 || this.unstickDropdownIndex === -1) return;
+
+            const stickItem = this.$dropdownList.children[this.stickDropdownIndex];
+            const unstickItem = this.$dropdownList.children[this.unstickDropdownIndex];
+            if (!(stickItem && unstickItem)) return;
+
+            if (column.sticky) {
+                stickItem.classList.add('dt-hidden');
+                unstickItem.classList.remove('dt-hidden');
+            } else {
+                stickItem.classList.remove('dt-hidden');
+                unstickItem.classList.add('dt-hidden');
+            }
+        }
     }
 
     class RowManager {
@@ -4889,12 +4941,26 @@ var DataTable = (function (Sortable) {
         }
 
         render() {
-            const rows = this.datamanager.getRowsForView();
+            const rows = this.getRowsToRender();
             this.renderRows(rows);
             // setDimensions requires atleast 1 row to exist in dom
             this.instance.setDimensions();
         }
 
+        // Keep the current tree expand/collapse state on a full re-render
+        getRowsToRender() {
+            const rows = this.datamanager.getRowsForView();
+            let closedIndent = null;
+            return rows.filter(row => {
+                const { indent, isTreeNodeClose } = row.meta;
+                if (closedIndent !== null && indent > closedIndent) {
+                    return false;
+                }
+                closedIndent = isTreeNodeClose ? indent : null;
+                return true;
+            });
+        }
+
         renderFooter() {
             if (!this.options.showTotalRow) return;
 
@@ -5024,6 +5090,7 @@ var DataTable = (function (Sortable) {
 
         bindScrollHeader() {
             this._settingHeaderPosition = false;
+            this.updateStickyTopPositions(0);
 
             $.on(this.bodyScrollable, 'scroll', (e) => {
                 if (this._settingHeaderPosition) return;
@@ -5031,7 +5098,8 @@ var DataTable = (function (Sortable) {
                 this._settingHeaderPosition = true;
 
                 requestAnimationFrame(() => {
-                    const left = -e.target.scrollLeft;
+                    const scrollLeft = e.target.scrollLeft;
+                    const left = -scrollLeft;
 
                     $.style(this.header, {
                         transform: `translateX(${left}px)`
@@ -5039,6 +5107,7 @@ var DataTable = (function (Sortable) {
                     $.style(this.footer, {
                         transform: `translateX(${left}px)`
                     });
+                    this.updateStickyTopPositions(scrollLeft);
                     this._settingHeaderPosition = false;
                     if (this.instance.noData) {
                         $.style($('.no-data-message'), {
@@ -5136,6 +5205,7 @@ var DataTable = (function (Sortable) {
             this.setupColumnWidth();
             this.distributeRemainingWidth();
             this.setColumnStyle();
+            this.refreshStickyColumns();
             this.setBodyStyle();
         }
 
@@ -5293,6 +5363,12 @@ var DataTable = (function (Sortable) {
                     this.columnmanager.setColumnHeaderWidth(column.colIndex);
                     this.columnmanager.setColumnWidth(column.colIndex);
                 });
+            this.refreshStickyColumns();
+        }
+
+        refreshStickyColumns() {
+            this.setStickyColumnStyle();
+            this.updateStickyTopPositions(this.bodyScrollable.scrollLeft || 0);
         }
 
         setBodyStyle() {
@@ -5354,6 +5430,59 @@ var DataTable = (function (Sortable) {
             return $(`.dt-cell--col-${colIndex}`, this.header);
         }
 
+        setStickyColumnStyle() {
+            if (!this.datamanager || !this.datamanager.getColumns) return;
+
+            const columns = this.datamanager.getColumns();
+            if (!columns.some(column => column.sticky) && !(this._stickySelectors || []).length) return;
+
+            const stickySelectors = [];
+            let stickyOffset = 0;
+            let normalOffset = 0;
+
+            columns.forEach((column) => {
+                const $headerCell = this.getColumnHeaderElement(column.colIndex);
+                const renderedWidth = $headerCell ? $headerCell.offsetWidth : column.width;
+
+                if (column.sticky) {
+                    const selector = `.dt-cell--col-${column.colIndex}.dt-cell--sticky`;
+                    const style = {
+                        left: `${stickyOffset}px`
+                    };
+
+                    column.stickyLeft = stickyOffset;
+                    column.stickyScrollTrigger = normalOffset - stickyOffset;
+                    column.renderedWidth = renderedWidth;
+                    this.setStyle(selector, style);
+                    stickySelectors.push(selector);
+                    stickyOffset += renderedWidth;
+                }
+                normalOffset += renderedWidth;
+            });
+
+            const staleSelectors = (this._stickySelectors || [])
+                .filter(selector => !stickySelectors.includes(selector));
+
+            staleSelectors.forEach(selector => this.removeStyle(selector));
+            this._stickySelectors = stickySelectors;
+        }
+
+        updateStickyTopPositions(scrollLeft) {
+            if (!this.datamanager || !this.datamanager.getColumns) return;
+
+            const stickyColumns = this.datamanager.getColumns().filter(column => column.sticky);
+
+            stickyColumns.forEach((column) => {
+                const trigger = Math.max(0, column.stickyScrollTrigger || 0);
+                const compensation = Math.max(0, scrollLeft - trigger);
+                const cells = $.each(`.dt-cell--col-${column.colIndex}.dt-cell--sticky-top`, this.wrapper) || [];
+
+                $.style(cells, {
+                    transform: compensation ? `translateX(${compensation}px)` : ''
+                });
+            });
+        }
+
         getRowIndexColumnWidth() {
             const rowCount = this.datamanager.getRowCount();
             const padding = 22;
@@ -5417,7 +5546,11 @@ var DataTable = (function (Sortable) {
         }
     }
 
+    var Freeze = "Freeze";
+    var Unfreeze = "Unfreeze";
     var en = {
+    	Freeze: Freeze,
+    	Unfreeze: Unfreeze,
     	"Sort Ascending": "Sort Ascending",
     	"Sort Descending": "Sort Descending",
     	"Reset sorting": "Reset sorting",
@@ -5427,7 +5560,11 @@ var DataTable = (function (Sortable) {
     	"{count} rows selected": {"1":"{count} row selected","default":"{count} rows selected"}
     };
 
+    var Freeze$1 = "Bevriezen";
+    var Unfreeze$1 = "Ontdooien";
     var de = {
+    	Freeze: Freeze$1,
+    	Unfreeze: Unfreeze$1,
     	"Sort Ascending": "Aufsteigend sortieren",
     	"Sort Descending": "Absteigend sortieren",
     	"Reset sorting": "Sortierung zurücksetzen",
@@ -5437,7 +5574,11 @@ var DataTable = (function (Sortable) {
     	"{count} rows selected": {"1":"{count} Zeile ausgewählt","default":"{count} Zeilen ausgewählt"}
     };
 
+    var Freeze$2 = "Geler";
+    var Unfreeze$2 = "Dégeler";
     var fr = {
+    	Freeze: Freeze$2,
+    	Unfreeze: Unfreeze$2,
     	"Sort Ascending": "Trier par ordre croissant",
     	"Sort Descending": "Trier par ordre décroissant",
     	"Reset sorting": "Réinitialiser le tri",
@@ -5447,7 +5588,11 @@ var DataTable = (function (Sortable) {
     	"{count} rows selected": {"1":"{count} ligne sélectionnée","default":"{count} lignes sélectionnées"}
     };
 
+    var Freeze$3 = "Congelare";
+    var Unfreeze$3 = "Dégeler";
     var it = {
+    	Freeze: Freeze$3,
+    	Unfreeze: Unfreeze$3,
     	"Sort Ascending": "Ordinamento ascendente",
     	"Sort Descending": "Ordinamento decrescente",
     	"Reset sorting": "Azzeramento ordinamento",
@@ -5729,6 +5874,22 @@ var DataTable = (function (Sortable) {
                     action: function (column) {
                         this.removeColumn(column.colIndex);
                     }
+                },
+                {
+                    label: instance.translate('Freeze'),
+                    stickyAction: 'stick',
+                    display: 'hidden',
+                    action: function (column) {
+                        this.setColumnSticky(column.colIndex, true);
+                    }
+                },
+                {
+                    label: instance.translate('Unfreeze'),
+                    stickyAction: 'unstick',
+                    display: 'hidden',
+                    action: function (column) {
+                        this.setColumnSticky(column.colIndex, false);
+                    }
                 }
             ],
             events: {
@@ -5753,6 +5914,7 @@ var DataTable = (function (Sortable) {
             freezeMessage: '',
             getEditor: null,
             serialNoColumn: true,
+            serialNoColumnLabel: '',
             checkboxColumn: false,
             clusterize: true,
             logs: false,
@@ -5984,6 +6146,10 @@ var DataTable = (function (Sortable) {
             this.columnmanager.removeColumn(colIndex);
         }
 
+        setColumnSticky(colIndex, sticky) {
+            this.columnmanager.setColumnSticky(colIndex, sticky);
+        }
+
         scrollToLastColumn() {
             this.datatableWrapper.scrollLeft = 9999;
         }
@@ -6063,7 +6229,7 @@ var DataTable = (function (Sortable) {
     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","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":"^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 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":"^25.0.3","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 = "Alphamonak Solutions";