melondtable 1.18.5 → 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() {
@@ -267,9 +273,29 @@ export default class ColumnManager {
             .then(() => this.instance.unfreeze())
             .then(() => {
                 this.fireEvent('onSortColumn', this.getColumn(colIndex));
+                this.setSortState();
             });
     }
 
+    saveSorting(colIndex) {
+        let currentColumn = this.getColumn(colIndex);
+        let saveSorting = {
+            [currentColumn.name]: {
+                colIndex: colIndex,
+                sortOrder: currentColumn.sortOrder
+            }
+        };
+        this.sortingKey = this.options.sortingKey ? `${this.options.sortingKey}::sortedColumns` : 'sortedColumns' ;
+        localStorage.setItem(this.sortingKey, JSON.stringify(saveSorting));
+    }
+    setSortState(sortOrder) {
+        if (sortOrder === 'none') {
+            this.sortState = false;
+        } else {
+            this.sortState = true;
+        }
+    }
+
     removeColumn(colIndex) {
         const removedCol = this.getColumn(colIndex);
         this.instance.freeze();
@@ -284,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)
@@ -368,6 +408,19 @@ export default class ColumnManager {
         }
     }
 
+    applySavedSortOrder() {
+
+        let key = this.options.sortingKey ? `${this.options.sortingKey}::sortedColumns` : 'sortedColumns' ;
+        let sortingConfig = JSON.parse(localStorage.getItem(key));
+        if (sortingConfig) {
+            const columnsToSort = Object.values(sortingConfig);
+            for (let column of columnsToSort) {
+                this.sortColumn(column.colIndex, column.sortOrder);
+                this.sortState = true;
+            }
+        }
+    }
+
     sortRows(colIndex, sortOrder) {
         return this.datamanager.sortRows(colIndex, sortOrder);
     }
@@ -443,13 +496,38 @@ export default class ColumnManager {
 
     getDropdownListHTML() {
         const { headerDropdown: dropdownItems } = this.options;
-
         return `
-            <div class="dt-dropdown__list">
-            ${dropdownItems.map((d, i) => `
-                <div class="dt-dropdown__list-item" data-index="${i}">${d.label}</div>
-            `).join('')}
+        <div class="dt-dropdown__list">
+        ${dropdownItems.map((d, i) => `
+            <div 
+                class="dt-dropdown__list-item${d.display ? ' dt-hidden' : ''}" 
+                data-index="${i}"
+            >
+                ${d.label}
             </div>
-        `;
+        `).join('')}
+        </div>
+    `;
+    }
+
+    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

@@ -41,6 +41,10 @@ class DataTable {
         if (this.options.data) {
             this.refresh();
             this.columnmanager.applyDefaultSortOrder();
+            if (this.options.saveSorting) {
+                this.setupSaveSorting();
+                this.columnmanager.applySavedSortOrder();
+            }
         }
     }
 
@@ -210,11 +214,18 @@ class DataTable {
     sortColumn(colIndex, sortOrder) {
         this.columnmanager.sortColumn(colIndex, sortOrder);
     }
+    saveSorting(colIndex, nextSortOrder) {
+        this.columnmanager.saveSorting(colIndex, nextSortOrder);
+    }
 
     removeColumn(colIndex) {
         this.columnmanager.removeColumn(colIndex);
     }
 
+    setColumnSticky(colIndex, sticky) {
+        this.columnmanager.setColumnSticky(colIndex, sticky);
+    }
+
     scrollToLastColumn() {
         this.datatableWrapper.scrollLeft = 9999;
     }
@@ -263,6 +274,25 @@ class DataTable {
     translate(str, args) {
         return this.translationManager.translate(str, args);
     }
+    setupSaveSorting() {
+        // add options in default headerdropdown
+        let action = {
+            label: this.translate('Save Sorting'),
+            action: function (column) {
+                this.saveSorting(column.colIndex, column.sotOrder);
+            },
+            display: 'hidden'
+        };
+        this.options.headerDropdown.push(action);
+        this.columnmanager.bindDropdown();
+        // add events for onSortColumn
+        this.on('onSortColumn', function (column) {
+            this.columnmanager.toggleDropdownItem(4);
+            if (column.sortOrder === 'none') {
+                localStorage.removeItem(this.columnmanager.sortingKey);
+            }
+        });
+    }
 }
 
 DataTable.instances = 0;

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;
@@ -295,6 +324,10 @@
     left: -999em;
 }
 
+.dt-hidden{
+    display: none;
+}
+
 body.dt-resize {
     cursor: col-resize;
 }

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

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

package/src/translations/pt.json

@@ -0,0 +1,16 @@
+{
+	"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

@@ -0,0 +1,16 @@
+{
+	"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"
+	}
+}
+

package/src/translations/de.json

@@ -1,15 +0,0 @@
-{
-	"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"
-	}
-}

package/src/translations/it.json

@@ -1,15 +0,0 @@
-{
-	"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"
-	}
-}