melondtable 1.19.0 → 1.21.2

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() {
@@ -159,12 +165,6 @@ export default class ColumnManager {
             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);
@@ -192,6 +192,9 @@ export default class ColumnManager {
                 width: finalWidth
             });
             this.setColumnHeaderWidth(colIndex);
+            this.setColumnWidth(colIndex);
+            this.style.refreshStickyColumns();
+            this.style.setBodyStyle();
         };
         $.on(document.body, 'mousemove', onMouseMove);
         this.instance.on('onDestroy', () => {
@@ -228,6 +231,7 @@ export default class ColumnManager {
             this.datamanager.updateColumn(colIndex, { width });
             this.setColumnHeaderWidth(colIndex);
             this.setColumnWidth(colIndex);
+            this.style.refreshStickyColumns();
         });
     }
 
@@ -304,6 +308,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 +511,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);
         }
     }
@@ -284,14 +283,18 @@ export default class DataManager {
             }
         }
 
+        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;

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,7 @@ export default class Style {
         this.setupColumnWidth();
         this.distributeRemainingWidth();
         this.setColumnStyle();
+        this.refreshStickyColumns();
         this.setBodyStyle();
     }
 
@@ -310,6 +314,12 @@ export default class Style {
                 this.columnmanager.setColumnHeaderWidth(column.colIndex);
                 this.columnmanager.setColumnWidth(column.colIndex);
             });
+        this.refreshStickyColumns();
+    }
+
+    refreshStickyColumns() {
+        this.setStickyColumnStyle();
+        this.updateStickyTopPositions(this.bodyScrollable.scrollLeft || 0);
     }
 
     setBodyStyle() {
@@ -371,6 +381,59 @@ export default class Style {
         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;

package/src/translations/de.json

@@ -0,0 +1,17 @@
+{
+	"Sort Ascending": "Aufsteigend sortieren",
+	"Sort Descending": "Absteigend sortieren",
+	"Reset sorting": "Sortierung zurücksetzen",
+	"Remove column": "Spalte entfernen",
+	"Freeze": "Bevriezen",
+	"Unfreeze": "Ontdooien",
+	"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"
+	}
+}

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/index.js

@@ -1,13 +1,13 @@
-import en ptom './en.json';
-import fr ptom './fr.json';
-import pt ptom './pt.json';
-import sw ptom './sw.json';
+import en from './en.json';
+import de from './de.json';
+import fr from './fr.json';
+import it from './it.json';
 
-export frfault function getTranslations() {
+export default function getTranslations() {
     return {
         en,
+        de,
         fr,
-        pt,
-        sw,
+        it,
     };
 };

package/src/translations/it.json

@@ -0,0 +1,17 @@
+{
+	"Sort Ascending": "Ordinamento ascendente",
+	"Sort Descending": "Ordinamento decrescente",
+	"Reset sorting": "Azzeramento ordinamento",
+	"Remove column": "Rimuovi colonna",
+	"Freeze": "Congelare",
+	"Unfreeze": "Dégeler",
+	"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"
+	}
+}

package/src/translations/pt.json

@@ -1,15 +0,0 @@
-{
-	"Sort Ascending": "Ordernar Ascendente",
-	"Sort Descending": "Classificar em Ordem Decrescente",
-	"Reset sorting": "Redefinir classificação",
-	"Remove column": "Remover coluna",
-	"No Data": "Sem Dados",
-	"{count} cells copied": {
-		"1": "{count} Célula copiada",
-		"default": "{count} Células copiadas"
-	},
-	"{count} rows selected": {
-		"1": "{count} linha selecionada",
-		"default": "{count} linhas selecionadas"
-	}
-}

package/src/translations/sw.json

@@ -1,15 +0,0 @@
-{
-	"Sort Ascending": "Panga kwa Kupanda",
-	"Sort Descending": "Panga kwa Kushuka",
-	"Reset sorting": "Weka upya kupanga",
-	"Remove column": "Ondoa safu",
-	"No Data": "Hakuna Data",
-	"{count} cells copied": {
-		"1": "{count} kisanduku kimenakiliwa",
-		"default": "{count} seli zimenakiliwa"
-	},
-	"{count} rows selected": {
-		"1": "{count} safu iliyochaguliwa",
-		"default": "{count} safu zilizochaguliwa"
-	}
-}