melondtable 1.19.0 → 1.20.7

package/src/columnmanager.js

@@ -93,7 +93,7 @@ export default class ColumnManager {
         });
 
         $.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;
@@ -108,6 +108,11 @@ export default class ColumnManager {
             _this.hideDropdown();
         }
 
+        this.stickDropdownIndex = this.options.headerDropdown
+            .findIndex(item => item.stickyAction === 'stick');
+        this.unstickDropdownIndex = this.options.headerDropdown
+            .findIndex(item => item.stickyAction === 'unstick');
+
         this.hideDropdown();
     }
 
@@ -124,6 +129,7 @@ export default class ColumnManager {
         const $cell = $.closest('.dt-cell', e.target);
         const { colIndex } = $.data($cell);
         this._dropdownActiveColIndex = colIndex;
+        this.updateStickyDropdownItems(this.getColumn(colIndex));
     }
 
     hideDropdown() {
@@ -304,6 +310,20 @@ export default class ColumnManager {
             });
     }
 
+    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)
@@ -493,4 +513,21 @@ export default class ColumnManager {
     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');
+        }
+    }
 }

package/src/datamanager.js

@@ -62,6 +62,7 @@ export default class DataManager {
                 sortable: false,
                 focusable: false,
                 dropdown: false,
+                sticky: true,
                 width: 32
             };
             this.columns.push(cell);
@@ -70,16 +71,14 @@ export default class DataManager {
         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);
         }
     }

package/src/datatable.js

@@ -222,6 +222,10 @@ class DataTable {
         this.columnmanager.removeColumn(colIndex);
     }
 
+    setColumnSticky(colIndex, sticky) {
+        this.columnmanager.setColumnSticky(colIndex, sticky);
+    }
+
     scrollToLastColumn() {
         this.datatableWrapper.scrollLeft = 9999;
     }

package/src/defaults.js

@@ -30,6 +30,22 @@ export default function getDefaultOptions(instance) {
                 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: {
@@ -54,6 +70,7 @@ export default function getDefaultOptions(instance) {
         freezeMessage: '',
         getEditor: null,
         serialNoColumn: true,
+        serialNoColumnLabel: '',
         checkboxColumn: false,
         clusterize: true,
         logs: false,

package/src/style.css

@@ -17,6 +17,7 @@
     --dt-toast-message-border: none;
     --dt-header-cell-bg: var(--dt-cell-bg);
     --dt-no-data-message-width: 90px;
+    --dt-scroll-left: 0px;
 }
 
 .datatable {
@@ -69,7 +70,7 @@
         display: none;
     }
 
-    &:last-child:not(.dt-row-filter) {
+    &:last-child:not(.dt-row-filter) .dt-cell {
         border-bottom: 1px solid var(--dt-border-color);
     }
 }
@@ -77,7 +78,7 @@
 .dt-cell {
     border: 1px solid var(--dt-border-color);
     border-bottom: none;
-    border-right: none;
+    border-left: none;
     position: relative;
     outline: none;
     padding: 0;
@@ -91,6 +92,10 @@
     background-clip: padding-box;
     user-select: none;
 
+    &:first-child {
+        border-left: 1px solid var(--dt-border-color);
+    }
+
     &__content {
         padding: var(--dt-spacer-2);
         border: var(--dt-focus-border-width) solid transparent;
@@ -170,6 +175,29 @@
     &:last-child {
         border-right: 1px solid var(--dt-border-color);
     }
+
+    &--sticky {
+        position: sticky;
+        left: 0;
+        z-index: 1;
+    }
+
+    &--sticky-top {
+        z-index: 4;
+        will-change: transform;
+    }
+
+    &--sticky-last::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: -1px;
+        width: 8px;
+        height: 100%;
+        pointer-events: none;
+        box-shadow: 4px 0 6px -4px rgba(15, 23, 42, 0.2);
+    }
+
 }
 
 .datatable[dir=rtl] .dt-cell__resize-handle {
@@ -207,7 +235,7 @@
     &__list {
         position: fixed;
         min-width: 8rem;
-        z-index: 1;
+        z-index: 10;
         cursor: pointer;
         background-color: var(--dt-cell-bg);
         border-radius: var(--dt-border-radius);
@@ -245,6 +273,7 @@
     bottom: var(--dt-spacer-3);
     left: 50%;
     transform: translateX(-50%);
+    z-index: 5;
 
     &__message {
         display: inline-block;

package/src/style.js

@@ -41,6 +41,7 @@ export default class Style {
 
     bindScrollHeader() {
         this._settingHeaderPosition = false;
+        this.updateStickyTopPositions(0);
 
         $.on(this.bodyScrollable, 'scroll', (e) => {
             if (this._settingHeaderPosition) return;
@@ -48,7 +49,8 @@ export default class Style {
             this._settingHeaderPosition = true;
 
             requestAnimationFrame(() => {
-                const left = -e.target.scrollLeft;
+                const scrollLeft = e.target.scrollLeft;
+                const left = -scrollLeft;
 
                 $.style(this.header, {
                     transform: `translateX(${left}px)`
@@ -56,6 +58,7 @@ export default class Style {
                 $.style(this.footer, {
                     transform: `translateX(${left}px)`
                 });
+                this.updateStickyTopPositions(scrollLeft);
                 this._settingHeaderPosition = false;
                 if (this.instance.noData) {
                     $.style($('.no-data-message'), {
@@ -153,6 +156,8 @@ export default class Style {
         this.setupColumnWidth();
         this.distributeRemainingWidth();
         this.setColumnStyle();
+        this.setStickyColumnStyle();
+        this.updateStickyTopPositions(this.bodyScrollable.scrollLeft || 0);
         this.setBodyStyle();
     }
 
@@ -310,6 +315,8 @@ export default class Style {
                 this.columnmanager.setColumnHeaderWidth(column.colIndex);
                 this.columnmanager.setColumnWidth(column.colIndex);
             });
+        this.setStickyColumnStyle();
+        this.updateStickyTopPositions(this.bodyScrollable.scrollLeft || 0);
     }
 
     setBodyStyle() {
@@ -371,6 +378,56 @@ export default class Style {
         return $(`.dt-cell--col-${colIndex}`, this.header);
     }
 
+    setStickyColumnStyle() {
+        if (!this.datamanager || !this.datamanager.getColumns) return;
+
+        const stickySelectors = [];
+        let stickyOffset = 0;
+        let normalOffset = 0;
+
+        this.datamanager.getColumns().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;

package/src/translations/en.json

@@ -3,6 +3,8 @@
 	"Sort Descending": "Sort Descending",
 	"Reset sorting": "Reset sorting",
 	"Remove column": "Remove column",
+	"Freeze": "Freeze",
+	"Unfreeze": "Unfreeze",
 	"No Data": "No Data",
 	"{count} cells copied": {
 		"1": "{count} cell copied",

package/src/translations/fr.json

@@ -3,6 +3,8 @@
 	"Sort Descending": "Trier par ordre décroissant",
 	"Reset sorting": "Réinitialiser le tri",
 	"Remove column": "Supprimer colonne",
+	"Freeze": "Geler",
+	"Unfreeze": "Dégeler",
 	"No Data": "Pas de données",
 	"{count} cells copied": {
 		"1": "{count} cellule copiée",

package/src/translations/pt.json

@@ -13,3 +13,4 @@
 		"default": "{count} linhas selecionadas"
 	}
 }
+

package/src/translations/sw.json

@@ -13,3 +13,4 @@
 		"default": "{count} safu zilizochaguliwa"
 	}
 }
+