From cf792e193ffb1c0a6f881589d02481e12645b8f0 Mon Sep 17 00:00:00 2001 From: sokumon Date: Tue, 11 Mar 2025 10:20:54 +0530 Subject: [PATCH 01/16] feat: save sorting --- src/columnmanager.js | 23 +++++++++++++++++++++++ src/datatable.js | 1 + src/defaults.js | 1 + 3 files changed, 25 insertions(+) diff --git a/src/columnmanager.js b/src/columnmanager.js index fabfbe72..62731448 100644 --- a/src/columnmanager.js +++ b/src/columnmanager.js @@ -123,6 +123,7 @@ export default class ColumnManager { }); const $cell = $.closest('.dt-cell', e.target); const { colIndex } = $.data($cell); + debugger; this._dropdownActiveColIndex = colIndex; } @@ -256,6 +257,7 @@ export default class ColumnManager { animation: 150 }); } + sortColumn(colIndex, nextSortOrder) { this.instance.freeze(); @@ -267,8 +269,21 @@ export default class ColumnManager { .then(() => this.instance.unfreeze()) .then(() => { this.fireEvent('onSortColumn', this.getColumn(colIndex)); + this.saveSorting(colIndex, nextSortOrder) }); } + + saveSorting(colIndex){ + let currentColumn = this.getColumn(colIndex); + let saveSorting = { + [currentColumn.name]: { + colIndex: colIndex, + sortOrder: currentColumn.sortOrder + } + } + localStorage.setItem('savedSorting', JSON.stringify(saveSorting)); + } + removeColumn(colIndex) { const removedCol = this.getColumn(colIndex); @@ -368,6 +383,14 @@ export default class ColumnManager { } } + applySavedSortOrder(){ + let sortingConfig = JSON.parse(localStorage.getItem("savedSorting")) + const columnsToSort = Object.values(sortingConfig) + for(let column of columnsToSort){ + this.sortColumn(column.colIndex, column.sortOrder); + } + } + sortRows(colIndex, sortOrder) { return this.datamanager.sortRows(colIndex, sortOrder); } diff --git a/src/datatable.js b/src/datatable.js index 1feca4d9..aaee842f 100644 --- a/src/datatable.js +++ b/src/datatable.js @@ -40,6 +40,7 @@ class DataTable { if (this.options.data) { this.refresh(); + this.columnmanager.applySavedSortOrder(); this.columnmanager.applyDefaultSortOrder(); } } diff --git a/src/defaults.js b/src/defaults.js index 359f8e8a..3299b410 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -23,6 +23,7 @@ export default function getDefaultOptions(instance) { label: instance.translate('Reset sorting'), action: function (column) { this.sortColumn(column.colIndex, 'none'); + localStorage.set("savedSort", null) } }, { From 09abc84d7ba50ea5a0b8b869b4417fd837eef624 Mon Sep 17 00:00:00 2001 From: sokumon Date: Tue, 11 Mar 2025 10:21:51 +0530 Subject: [PATCH 02/16] chore: run linter --- src/columnmanager.js | 19 ++++++++----------- src/defaults.js | 2 +- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/src/columnmanager.js b/src/columnmanager.js index 62731448..580fc957 100644 --- a/src/columnmanager.js +++ b/src/columnmanager.js @@ -123,7 +123,6 @@ export default class ColumnManager { }); const $cell = $.closest('.dt-cell', e.target); const { colIndex } = $.data($cell); - debugger; this._dropdownActiveColIndex = colIndex; } @@ -257,7 +256,6 @@ export default class ColumnManager { animation: 150 }); } - sortColumn(colIndex, nextSortOrder) { this.instance.freeze(); @@ -269,21 +267,20 @@ export default class ColumnManager { .then(() => this.instance.unfreeze()) .then(() => { this.fireEvent('onSortColumn', this.getColumn(colIndex)); - this.saveSorting(colIndex, nextSortOrder) + this.saveSorting(colIndex, nextSortOrder); }); } - - saveSorting(colIndex){ + + saveSorting(colIndex) { let currentColumn = this.getColumn(colIndex); let saveSorting = { [currentColumn.name]: { colIndex: colIndex, sortOrder: currentColumn.sortOrder } - } + }; localStorage.setItem('savedSorting', JSON.stringify(saveSorting)); } - removeColumn(colIndex) { const removedCol = this.getColumn(colIndex); @@ -383,10 +380,10 @@ export default class ColumnManager { } } - applySavedSortOrder(){ - let sortingConfig = JSON.parse(localStorage.getItem("savedSorting")) - const columnsToSort = Object.values(sortingConfig) - for(let column of columnsToSort){ + applySavedSortOrder() { + let sortingConfig = JSON.parse(localStorage.getItem('savedSorting')); + const columnsToSort = Object.values(sortingConfig); + for (let column of columnsToSort) { this.sortColumn(column.colIndex, column.sortOrder); } } diff --git a/src/defaults.js b/src/defaults.js index 3299b410..82b96c6c 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -23,7 +23,7 @@ export default function getDefaultOptions(instance) { label: instance.translate('Reset sorting'), action: function (column) { this.sortColumn(column.colIndex, 'none'); - localStorage.set("savedSort", null) + localStorage.set('savedSort', null); } }, { From f3e9fd5ed662983b61d6523764d9d28ca5c491bc Mon Sep 17 00:00:00 2001 From: sokumon Date: Thu, 13 Mar 2025 02:17:19 +0530 Subject: [PATCH 03/16] fix: allow cell select to work after sorting --- src/datamanager.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/datamanager.js b/src/datamanager.js index 6e7ba0b6..6220a50a 100644 --- a/src/datamanager.js +++ b/src/datamanager.js @@ -313,6 +313,12 @@ export default class DataManager { this.rows.forEach((row, index) => { const viewIndex = this.rowViewOrder.indexOf(index); const cell = row[srNoColIndex]; + row.meta.rowIndex = viewIndex + if(Array.isArray(row)){ + row.forEach(r => { + r.rowIndex = viewIndex + }) + } cell.content = (viewIndex + 1) + ''; }); } From 8ec97ad2a4c9cd05c4bf7939320a62bc654e1a0c Mon Sep 17 00:00:00 2001 From: sokumon Date: Thu, 13 Mar 2025 10:53:50 +0530 Subject: [PATCH 04/16] fix: remove typo, make save work for tests --- src/columnmanager.js | 8 +++++--- src/defaults.js | 2 +- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/columnmanager.js b/src/columnmanager.js index 580fc957..1301a3b1 100644 --- a/src/columnmanager.js +++ b/src/columnmanager.js @@ -382,9 +382,11 @@ export default class ColumnManager { applySavedSortOrder() { let sortingConfig = JSON.parse(localStorage.getItem('savedSorting')); - const columnsToSort = Object.values(sortingConfig); - for (let column of columnsToSort) { - this.sortColumn(column.colIndex, column.sortOrder); + if(sortingConfig){ + const columnsToSort = Object.values(sortingConfig); + for (let column of columnsToSort) { + this.sortColumn(column.colIndex, column.sortOrder); + } } } diff --git a/src/defaults.js b/src/defaults.js index 82b96c6c..86b44a0e 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -23,7 +23,7 @@ export default function getDefaultOptions(instance) { label: instance.translate('Reset sorting'), action: function (column) { this.sortColumn(column.colIndex, 'none'); - localStorage.set('savedSort', null); + localStorage.setItem('savedSort', null); } }, { From 8d1fb87891836d15eaf28e70f8c4c79d8aaf5ccb Mon Sep 17 00:00:00 2001 From: sokumon Date: Thu, 13 Mar 2025 10:55:21 +0530 Subject: [PATCH 05/16] chore: run linter --- src/columnmanager.js | 2 +- src/datamanager.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/columnmanager.js b/src/columnmanager.js index 1301a3b1..8ed1d6bd 100644 --- a/src/columnmanager.js +++ b/src/columnmanager.js @@ -382,7 +382,7 @@ export default class ColumnManager { applySavedSortOrder() { let sortingConfig = JSON.parse(localStorage.getItem('savedSorting')); - if(sortingConfig){ + if (sortingConfig) { const columnsToSort = Object.values(sortingConfig); for (let column of columnsToSort) { this.sortColumn(column.colIndex, column.sortOrder); diff --git a/src/datamanager.js b/src/datamanager.js index 6220a50a..9cf4a617 100644 --- a/src/datamanager.js +++ b/src/datamanager.js @@ -313,11 +313,11 @@ export default class DataManager { this.rows.forEach((row, index) => { const viewIndex = this.rowViewOrder.indexOf(index); const cell = row[srNoColIndex]; - row.meta.rowIndex = viewIndex - if(Array.isArray(row)){ + row.meta.rowIndex = viewIndex; + if (Array.isArray(row)) { row.forEach(r => { - r.rowIndex = viewIndex - }) + r.rowIndex = viewIndex; + }); } cell.content = (viewIndex + 1) + ''; }); From 265be8f165c328bd10f9dad9235721dda480845c Mon Sep 17 00:00:00 2001 From: sokumon Date: Wed, 19 Mar 2025 00:25:10 +0530 Subject: [PATCH 06/16] fix: better way to select cells after sorted --- src/cellmanager.js | 20 +++++++++++++++----- src/datamanager.js | 12 ++++++------ 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/src/cellmanager.js b/src/cellmanager.js index c1d1a8f0..9c3b8213 100644 --- a/src/cellmanager.js +++ b/src/cellmanager.js @@ -333,7 +333,6 @@ export default class CellManager { _selectArea($cell1, $cell2) { if ($cell1 === $cell2) return false; - const cells = this.getCellsInRange($cell1, $cell2); if (!cells) return false; @@ -346,7 +345,7 @@ export default class CellManager { } getCellsInRange($cell1, $cell2) { - let colIndex1, rowIndex1, colIndex2, rowIndex2; + let colIndex1, rowIndex1, colIndex2, rowIndex2, sortedColumns; if (typeof $cell1 === 'number') { [colIndex1, rowIndex1, colIndex2, rowIndex2] = arguments; @@ -360,9 +359,18 @@ export default class CellManager { const cell2 = $.data($cell2); colIndex1 = +cell1.colIndex; - rowIndex1 = +cell1.rowIndex; colIndex2 = +cell2.colIndex; - rowIndex2 = +cell2.rowIndex; + if(this.datamanager.getColumn(colIndex1).sortOrder != "none" || this.datamanager.getColumn(colIndex2).sortOrder != "none"){ + sortedColumns = true; + rowIndex1 = this.datamanager.rowViewOrder.indexOf(parseInt(cell1.rowIndex)) + rowIndex2 = this.datamanager.rowViewOrder.indexOf(parseInt(cell2.rowIndex)) + }else{ + rowIndex1 = +cell1.rowIndex; + rowIndex2 = +cell2.rowIndex; + } + + + } if (rowIndex1 > rowIndex2) { @@ -394,7 +402,9 @@ export default class CellManager { } colIndex = colIndex1; }); - + if(sortedColumns){ + cells.map(selectedCells => selectedCells[1] = this.datamanager.rowViewOrder[selectedCells[1]]) + } return cells; } diff --git a/src/datamanager.js b/src/datamanager.js index 9cf4a617..c26ea6ca 100644 --- a/src/datamanager.js +++ b/src/datamanager.js @@ -313,12 +313,12 @@ export default class DataManager { this.rows.forEach((row, index) => { const viewIndex = this.rowViewOrder.indexOf(index); const cell = row[srNoColIndex]; - row.meta.rowIndex = viewIndex; - if (Array.isArray(row)) { - row.forEach(r => { - r.rowIndex = viewIndex; - }); - } + // row.meta.rowIndex = viewIndex; + // if (Array.isArray(row)) { + // row.forEach(r => { + // r.rowIndex = viewIndex; + // }); + // } cell.content = (viewIndex + 1) + ''; }); } From cdb2bcf38a97cb6b3aee5a3f329e30dceb8266aa Mon Sep 17 00:00:00 2001 From: sokumon Date: Wed, 19 Mar 2025 00:42:04 +0530 Subject: [PATCH 07/16] chore: linter, change variable name --- src/cellmanager.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/src/cellmanager.js b/src/cellmanager.js index 9c3b8213..1adca029 100644 --- a/src/cellmanager.js +++ b/src/cellmanager.js @@ -345,7 +345,7 @@ export default class CellManager { } getCellsInRange($cell1, $cell2) { - let colIndex1, rowIndex1, colIndex2, rowIndex2, sortedColumns; + let colIndex1, rowIndex1, colIndex2, rowIndex2, sortedColumn; if (typeof $cell1 === 'number') { [colIndex1, rowIndex1, colIndex2, rowIndex2] = arguments; @@ -360,17 +360,15 @@ export default class CellManager { colIndex1 = +cell1.colIndex; colIndex2 = +cell2.colIndex; - if(this.datamanager.getColumn(colIndex1).sortOrder != "none" || this.datamanager.getColumn(colIndex2).sortOrder != "none"){ - sortedColumns = true; - rowIndex1 = this.datamanager.rowViewOrder.indexOf(parseInt(cell1.rowIndex)) - rowIndex2 = this.datamanager.rowViewOrder.indexOf(parseInt(cell2.rowIndex)) - }else{ + if (this.datamanager.getColumn(colIndex1).sortOrder != 'none' || this.datamanager.getColumn(colIndex2).sortOrder != 'none') { + sortedColumn = true; + rowIndex1 = this.datamanager.rowViewOrder.indexOf(parseInt(cell1.rowIndex)); + rowIndex2 = this.datamanager.rowViewOrder.indexOf(parseInt(cell2.rowIndex)); + } else { rowIndex1 = +cell1.rowIndex; rowIndex2 = +cell2.rowIndex; } - - } if (rowIndex1 > rowIndex2) { @@ -402,8 +400,8 @@ export default class CellManager { } colIndex = colIndex1; }); - if(sortedColumns){ - cells.map(selectedCells => selectedCells[1] = this.datamanager.rowViewOrder[selectedCells[1]]) + if (sortedColumn) { + cells.map(selectedCells => selectedCells[1] = this.datamanager.rowViewOrder[selectedCells[1]]); } return cells; } From 04aaa9824c0f4aa582814b5e05b53e1d38978d82 Mon Sep 17 00:00:00 2001 From: sokumon Date: Wed, 19 Mar 2025 00:48:45 +0530 Subject: [PATCH 08/16] fix: changes for linter --- src/cellmanager.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/cellmanager.js b/src/cellmanager.js index 1adca029..3c6f9f7a 100644 --- a/src/cellmanager.js +++ b/src/cellmanager.js @@ -360,10 +360,11 @@ export default class CellManager { colIndex1 = +cell1.colIndex; colIndex2 = +cell2.colIndex; - if (this.datamanager.getColumn(colIndex1).sortOrder != 'none' || this.datamanager.getColumn(colIndex2).sortOrder != 'none') { + if (this.datamanager.getColumn(colIndex1).sortOrder !== 'none' || + this.datamanager.getColumn(colIndex2).sortOrder !== 'none') { sortedColumn = true; - rowIndex1 = this.datamanager.rowViewOrder.indexOf(parseInt(cell1.rowIndex)); - rowIndex2 = this.datamanager.rowViewOrder.indexOf(parseInt(cell2.rowIndex)); + rowIndex1 = this.datamanager.rowViewOrder.indexOf(parseInt(cell1.rowIndex, 10)); + rowIndex2 = this.datamanager.rowViewOrder.indexOf(parseInt(cell2.rowIndex, 10)); } else { rowIndex1 = +cell1.rowIndex; rowIndex2 = +cell2.rowIndex; @@ -401,7 +402,9 @@ export default class CellManager { colIndex = colIndex1; }); if (sortedColumn) { - cells.map(selectedCells => selectedCells[1] = this.datamanager.rowViewOrder[selectedCells[1]]); + cells.forEach(selectedCells => { + selectedCells[1] = this.datamanager.rowViewOrder[selectedCells[1]]; + }); } return cells; } From 2ff862c21d64d7f6d109bdb342c92905186e2cbb Mon Sep 17 00:00:00 2001 From: sokumon Date: Wed, 19 Mar 2025 01:09:10 +0530 Subject: [PATCH 09/16] fix: make selection work for all columns --- src/cellmanager.js | 8 ++++---- src/columnmanager.js | 1 + 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/cellmanager.js b/src/cellmanager.js index 3c6f9f7a..cf38b334 100644 --- a/src/cellmanager.js +++ b/src/cellmanager.js @@ -360,9 +360,9 @@ export default class CellManager { colIndex1 = +cell1.colIndex; colIndex2 = +cell2.colIndex; - if (this.datamanager.getColumn(colIndex1).sortOrder !== 'none' || - this.datamanager.getColumn(colIndex2).sortOrder !== 'none') { - sortedColumn = true; + + if (this.columnmanager.sortState) { + this.sortedColumn = true; rowIndex1 = this.datamanager.rowViewOrder.indexOf(parseInt(cell1.rowIndex, 10)); rowIndex2 = this.datamanager.rowViewOrder.indexOf(parseInt(cell2.rowIndex, 10)); } else { @@ -401,7 +401,7 @@ export default class CellManager { } colIndex = colIndex1; }); - if (sortedColumn) { + if (this.columnmanager.sortState) { cells.forEach(selectedCells => { selectedCells[1] = this.datamanager.rowViewOrder[selectedCells[1]]; }); diff --git a/src/columnmanager.js b/src/columnmanager.js index 8ed1d6bd..d4838497 100644 --- a/src/columnmanager.js +++ b/src/columnmanager.js @@ -386,6 +386,7 @@ export default class ColumnManager { const columnsToSort = Object.values(sortingConfig); for (let column of columnsToSort) { this.sortColumn(column.colIndex, column.sortOrder); + this.sortState = true } } } From c34090784ada54ace88044e41db76009e176788a Mon Sep 17 00:00:00 2001 From: sokumon Date: Wed, 19 Mar 2025 01:09:58 +0530 Subject: [PATCH 10/16] chore: remove unused variable --- src/cellmanager.js | 4 ++-- src/columnmanager.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/cellmanager.js b/src/cellmanager.js index cf38b334..8275bfd6 100644 --- a/src/cellmanager.js +++ b/src/cellmanager.js @@ -345,7 +345,7 @@ export default class CellManager { } getCellsInRange($cell1, $cell2) { - let colIndex1, rowIndex1, colIndex2, rowIndex2, sortedColumn; + let colIndex1, rowIndex1, colIndex2, rowIndex2; if (typeof $cell1 === 'number') { [colIndex1, rowIndex1, colIndex2, rowIndex2] = arguments; @@ -360,7 +360,7 @@ export default class CellManager { colIndex1 = +cell1.colIndex; colIndex2 = +cell2.colIndex; - + if (this.columnmanager.sortState) { this.sortedColumn = true; rowIndex1 = this.datamanager.rowViewOrder.indexOf(parseInt(cell1.rowIndex, 10)); diff --git a/src/columnmanager.js b/src/columnmanager.js index d4838497..8531ec3f 100644 --- a/src/columnmanager.js +++ b/src/columnmanager.js @@ -386,7 +386,7 @@ export default class ColumnManager { const columnsToSort = Object.values(sortingConfig); for (let column of columnsToSort) { this.sortColumn(column.colIndex, column.sortOrder); - this.sortState = true + this.sortState = true; } } } From 689fb74117df3e8ae1b2906ab5f03afd3acc638e Mon Sep 17 00:00:00 2001 From: sokumon Date: Wed, 19 Mar 2025 02:09:13 +0530 Subject: [PATCH 11/16] fix: allow localstorage key to be set from options --- src/columnmanager.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/columnmanager.js b/src/columnmanager.js index 8531ec3f..186073c6 100644 --- a/src/columnmanager.js +++ b/src/columnmanager.js @@ -279,7 +279,8 @@ export default class ColumnManager { sortOrder: currentColumn.sortOrder } }; - localStorage.setItem('savedSorting', JSON.stringify(saveSorting)); + this.sortingKey = this.options.sortingKey ? 'sortedColumns' : `${this.options.sortingKey}::sortedColumns`; + localStorage.setItem(this.sortingKey, JSON.stringify(saveSorting)); } removeColumn(colIndex) { @@ -381,7 +382,8 @@ export default class ColumnManager { } applySavedSortOrder() { - let sortingConfig = JSON.parse(localStorage.getItem('savedSorting')); + let key = this.options.sortingKey ? 'sortedColumns' : `${this.options.sortingKey}::sortedColumns`; + let sortingConfig = JSON.parse(localStorage.getItem(key)); if (sortingConfig) { const columnsToSort = Object.values(sortingConfig); for (let column of columnsToSort) { From 5ef1f2419452c0a40d1d870978a8e9d8bcc8a7ad Mon Sep 17 00:00:00 2001 From: sokumon Date: Wed, 28 May 2025 01:01:22 +0530 Subject: [PATCH 12/16] feat: save sorting as a seperate dropdown --- src/columnmanager.js | 28 ++++++++++++++++++++-------- src/datatable.js | 5 ++++- src/defaults.js | 12 +++++++++++- src/style.css | 7 +++++++ 4 files changed, 42 insertions(+), 10 deletions(-) diff --git a/src/columnmanager.js b/src/columnmanager.js index 186073c6..ee9e2663 100644 --- a/src/columnmanager.js +++ b/src/columnmanager.js @@ -267,7 +267,6 @@ export default class ColumnManager { .then(() => this.instance.unfreeze()) .then(() => { this.fireEvent('onSortColumn', this.getColumn(colIndex)); - this.saveSorting(colIndex, nextSortOrder); }); } @@ -279,7 +278,8 @@ export default class ColumnManager { sortOrder: currentColumn.sortOrder } }; - this.sortingKey = this.options.sortingKey ? 'sortedColumns' : `${this.options.sortingKey}::sortedColumns`; + this.sortingKey = this.options.sortingKey ? `${this.options.sortingKey}::sortedColumns` : "sortedColumns" ; + console.log(this.sortingKey) localStorage.setItem(this.sortingKey, JSON.stringify(saveSorting)); } @@ -382,7 +382,9 @@ export default class ColumnManager { } applySavedSortOrder() { - let key = this.options.sortingKey ? 'sortedColumns' : `${this.options.sortingKey}::sortedColumns`; + debugger + 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,11 +472,21 @@ export default class ColumnManager { const { headerDropdown: dropdownItems } = this.options; return ` -
- ${dropdownItems.map((d, i) => ` -
${d.label}
- `).join('')} +
+ ${dropdownItems.map((d, i) => ` +
+ ${d.label}
- `; + `).join('')} +
+ `; + } + toggleDropdownItem(index){ + debugger + $(".dt-dropdown__list", this.instance.dropdownContainer).children[index].classList.toggle('dt-hidden'); + } } diff --git a/src/datatable.js b/src/datatable.js index aaee842f..b4af8a8b 100644 --- a/src/datatable.js +++ b/src/datatable.js @@ -40,8 +40,8 @@ class DataTable { if (this.options.data) { this.refresh(); - this.columnmanager.applySavedSortOrder(); this.columnmanager.applyDefaultSortOrder(); + this.columnmanager.applySavedSortOrder(); } } @@ -211,6 +211,9 @@ class DataTable { sortColumn(colIndex, sortOrder) { this.columnmanager.sortColumn(colIndex, sortOrder); } + saveSorting(colIndex,nextSortOrder){ + this.columnmanager.saveSorting(colIndex, nextSortOrder); + } removeColumn(colIndex) { this.columnmanager.removeColumn(colIndex); diff --git a/src/defaults.js b/src/defaults.js index 86b44a0e..6470d216 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -11,19 +11,29 @@ 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('savedSort', null); + localStorage.setItem('sortedColumns', null); } }, { diff --git a/src/style.css b/src/style.css index 6e2c61d6..e9e14e4c 100644 --- a/src/style.css +++ b/src/style.css @@ -221,6 +221,9 @@ &:hover { background-color: var(--dt-light-bg); } + .dt-hidden{ + display: none; + } } &--active &__list { @@ -295,6 +298,10 @@ left: -999em; } +.dt-hidden{ + display: none; +} + body.dt-resize { cursor: col-resize; } From 5b6191d85d8a7e1c0a5cfb2baf09a1ec7ede7ef6 Mon Sep 17 00:00:00 2001 From: sokumon Date: Wed, 28 May 2025 14:43:26 +0530 Subject: [PATCH 13/16] chore: run linter --- src/columnmanager.js | 18 +++++++++--------- src/datatable.js | 2 +- src/defaults.js | 8 ++++---- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/columnmanager.js b/src/columnmanager.js index ee9e2663..dcb2ee6f 100644 --- a/src/columnmanager.js +++ b/src/columnmanager.js @@ -278,8 +278,8 @@ export default class ColumnManager { sortOrder: currentColumn.sortOrder } }; - this.sortingKey = this.options.sortingKey ? `${this.options.sortingKey}::sortedColumns` : "sortedColumns" ; - console.log(this.sortingKey) + this.sortingKey = this.options.sortingKey ? `${this.options.sortingKey}::sortedColumns` : 'sortedColumns' ; + console.log(this.sortingKey); localStorage.setItem(this.sortingKey, JSON.stringify(saveSorting)); } @@ -382,9 +382,9 @@ export default class ColumnManager { } applySavedSortOrder() { - debugger - let key = this.options.sortingKey ? `${this.options.sortingKey}::sortedColumns` : "sortedColumns" ; - console.log(key) + + 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); @@ -484,9 +484,9 @@ export default class ColumnManager {
`; } - toggleDropdownItem(index){ - debugger - $(".dt-dropdown__list", this.instance.dropdownContainer).children[index].classList.toggle('dt-hidden'); - + toggleDropdownItem(index) { + + $('.dt-dropdown__list', this.instance.dropdownContainer).children[index].classList.toggle('dt-hidden'); + } } diff --git a/src/datatable.js b/src/datatable.js index b4af8a8b..aec92b84 100644 --- a/src/datatable.js +++ b/src/datatable.js @@ -211,7 +211,7 @@ class DataTable { sortColumn(colIndex, sortOrder) { this.columnmanager.sortColumn(colIndex, sortOrder); } - saveSorting(colIndex,nextSortOrder){ + saveSorting(colIndex, nextSortOrder) { this.columnmanager.saveSorting(colIndex, nextSortOrder); } diff --git a/src/defaults.js b/src/defaults.js index 6470d216..798f3d8d 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -11,23 +11,23 @@ export default function getDefaultOptions(instance) { label: instance.translate('Sort Ascending'), action: function (column) { this.sortColumn(column.colIndex, 'asc'); - this.columnmanager.toggleDropdownItem(2) + this.columnmanager.toggleDropdownItem(2); } }, { label: instance.translate('Sort Descending'), action: function (column) { this.sortColumn(column.colIndex, 'desc'); - this.columnmanager.toggleDropdownItem(2) + this.columnmanager.toggleDropdownItem(2); } }, { label: instance.translate('Save Sorting'), action: function (column) { this.saveSorting(column.colIndex, column.sotOrder); - this.columnmanager.toggleDropdownItem(2) + this.columnmanager.toggleDropdownItem(2); }, - display: "hidden" + display: 'hidden' }, { label: instance.translate('Reset sorting'), From 531d8ca02a803a35a40fa5d6a29c2f45178a94d6 Mon Sep 17 00:00:00 2001 From: sokumon Date: Wed, 28 May 2025 15:03:38 +0530 Subject: [PATCH 14/16] fix: remove uneccessary code --- src/datamanager.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/datamanager.js b/src/datamanager.js index c26ea6ca..6e7ba0b6 100644 --- a/src/datamanager.js +++ b/src/datamanager.js @@ -313,12 +313,6 @@ export default class DataManager { this.rows.forEach((row, index) => { const viewIndex = this.rowViewOrder.indexOf(index); const cell = row[srNoColIndex]; - // row.meta.rowIndex = viewIndex; - // if (Array.isArray(row)) { - // row.forEach(r => { - // r.rowIndex = viewIndex; - // }); - // } cell.content = (viewIndex + 1) + ''; }); } From a2963e7fbc5981de01d3647df94d16c0d11edecd Mon Sep 17 00:00:00 2001 From: sokumon Date: Thu, 29 May 2025 12:30:04 +0530 Subject: [PATCH 15/16] fix: remove additional style --- src/style.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/style.css b/src/style.css index e9e14e4c..c14fdb94 100644 --- a/src/style.css +++ b/src/style.css @@ -221,9 +221,6 @@ &:hover { background-color: var(--dt-light-bg); } - .dt-hidden{ - display: none; - } } &--active &__list { From b2e4127fc2f12881da7a2c0ba665b92e527ac3cc Mon Sep 17 00:00:00 2001 From: sokumon Date: Thu, 29 May 2025 19:24:33 +0530 Subject: [PATCH 16/16] fix: add a saveSorting option --- src/columnmanager.js | 14 +++++++++----- src/datatable.js | 24 +++++++++++++++++++++++- src/defaults.js | 11 ----------- 3 files changed, 32 insertions(+), 17 deletions(-) diff --git a/src/columnmanager.js b/src/columnmanager.js index dcb2ee6f..93344da2 100644 --- 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 `
${dropdownItems.map((d, i) => ` @@ -484,9 +489,8 @@ export default class ColumnManager {
`; } - 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 index aec92b84..c34ebc34 100644 --- 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 index 798f3d8d..359f8e8a 100644 --- 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); } }, {