fix: add a saveSorting option

sokumon · sokumon · commit b2e4127fc2f1 · 2025-05-29T19:24:33.000+05:30
diff --git a/src/columnmanager.js b/src/columnmanager.js
@@ -267,6 +267,7 @@ export default class ColumnManager {
             .then(() => this.instance.unfreeze())
             .then(() => {
                 this.fireEvent('onSortColumn', this.getColumn(colIndex));
+                this.setSortState();
             });
     }
 
@@ -279,9 +280,15 @@ export default class ColumnManager {
             }
         };
         this.sortingKey = this.options.sortingKey ? `${this.options.sortingKey}::sortedColumns` : 'sortedColumns' ;
-        console.log(this.sortingKey);
         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);
@@ -384,7 +391,6 @@ export default class ColumnManager {
     applySavedSortOrder() {
 
         let key = this.options.sortingKey ? `${this.options.sortingKey}::sortedColumns` : 'sortedColumns' ;
-        console.log(key);
         let sortingConfig = JSON.parse(localStorage.getItem(key));
         if (sortingConfig) {
             const columnsToSort = Object.values(sortingConfig);
@@ -470,7 +476,6 @@ export default class ColumnManager {
 
     getDropdownListHTML() {
         const { headerDropdown: dropdownItems } = this.options;
-
         return `
         <div class="dt-dropdown__list">
         ${dropdownItems.map((d, i) => `
@@ -484,9 +489,8 @@ export default class ColumnManager {
         </div>
     `;
     }
-    toggleDropdownItem(index) {
 
+    toggleDropdownItem(index) {
         $('.dt-dropdown__list', this.instance.dropdownContainer).children[index].classList.toggle('dt-hidden');
-
     }
 }
diff --git a/src/datatable.js b/src/datatable.js
@@ -41,7 +41,10 @@ class DataTable {
         if (this.options.data) {
             this.refresh();
             this.columnmanager.applyDefaultSortOrder();
-            this.columnmanager.applySavedSortOrder();
+            if (this.options.saveSorting) {
+                this.setupSaveSorting();
+                this.columnmanager.applySavedSortOrder();
+            }
         }
     }
 
@@ -267,6 +270,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;
diff --git a/src/defaults.js b/src/defaults.js
@@ -11,29 +11,18 @@ export default function getDefaultOptions(instance) {
                 label: instance.translate('Sort Ascending'),
                 action: function (column) {
                     this.sortColumn(column.colIndex, 'asc');
-                    this.columnmanager.toggleDropdownItem(2);
                 }
             },
             {
                 label: instance.translate('Sort Descending'),
                 action: function (column) {
                     this.sortColumn(column.colIndex, 'desc');
-                    this.columnmanager.toggleDropdownItem(2);
                 }
             },
-            {
-                label: instance.translate('Save Sorting'),
-                action: function (column) {
-                    this.saveSorting(column.colIndex, column.sotOrder);
-                    this.columnmanager.toggleDropdownItem(2);
-                },
-                display: 'hidden'
-            },
             {
                 label: instance.translate('Reset sorting'),
                 action: function (column) {
                     this.sortColumn(column.colIndex, 'none');
-                    localStorage.setItem('sortedColumns', null);
                 }
             },
             {

Original file line number	Diff line number	Diff line change
`@@ -11,29 +11,18 @@ export default function getDefaultOptions(instance) {`
`11`	`11`	`label: instance.translate('Sort Ascending'),`
`12`	`12`	`action: function (column) {`
`13`	`13`	`this.sortColumn(column.colIndex, 'asc');`
`14`		`- this.columnmanager.toggleDropdownItem(2);`
`15`	`14`	`}`
`16`	`15`	`},`
`17`	`16`	`{`
`18`	`17`	`label: instance.translate('Sort Descending'),`
`19`	`18`	`action: function (column) {`
`20`	`19`	`this.sortColumn(column.colIndex, 'desc');`
`21`		`- this.columnmanager.toggleDropdownItem(2);`
`22`	`20`	`}`
`23`	`21`	`},`
`24`		`- {`
`25`		`- label: instance.translate('Save Sorting'),`
`26`		`- action: function (column) {`
`27`		`- this.saveSorting(column.colIndex, column.sotOrder);`
`28`		`- this.columnmanager.toggleDropdownItem(2);`
`29`		`- },`
`30`		`- display: 'hidden'`
`31`		`- },`
`32`	`22`	`{`
`33`	`23`	`label: instance.translate('Reset sorting'),`
`34`	`24`	`action: function (column) {`
`35`	`25`	`this.sortColumn(column.colIndex, 'none');`
`36`		`- localStorage.setItem('sortedColumns', null);`
`37`	`26`	`}`
`38`	`27`	`},`
`39`	`28`	`{`