Skip to content

Commit 33deb6d

Browse files
kyle-wannacottkyle-wannacott
committed
Support custom table-arrows v1.22.0
1 parent db8da7c commit 33deb6d

File tree

9 files changed

+127
-139
lines changed

9 files changed

+127
-139
lines changed

‎README.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,13 @@ Examples on using table-sort-js with frontend frameworks such as [React.js](http
5151

5252
#### Classes:
5353

54-
| <table> classes | Description |
55-
| --------------------- | ------------------------------------------------------------------------------------------------------------- |
56-
| "table-sort" | Make the table sortable! (Words, numbers, dates, file sizes)... |
57-
| "table-arrows" | Display ascending or descending arrows. Supports custom arrows; example: "table-arrows-👆🤙👇" |
58-
| "no-class-infer" | Turns off inference for adding sort classes automatically e.g (file-size-sort, dates-dmy-sort), etc. |
59-
| "remember-sort" | If clicking on different columns remembers sort of the original column. |
60-
| "cells-sort" | sort cells (td) rather than table rows (tr); useful for keeping table rows with classes/attributes in place. |
54+
| <table> classes | Description |
55+
| --------------------- | ------------------------------------------------------------------------------------------------------------ |
56+
| "table-sort" | Make the table sortable! (Words, numbers, dates, file sizes)... |
57+
| "table-arrows" | Display ascending or descending arrows. Supports custom arrows; example: "table-arrows-👆🤙👇" |
58+
| "no-class-infer" | Turns off inference for adding sort classes automatically e.g (file-size-sort, dates-dmy-sort), etc. |
59+
| "remember-sort" | If clicking on different columns remembers sort of the original column. |
60+
| "cells-sort" | sort cells (td) rather than table rows (tr); useful for keeping table rows with classes/attributes in place. |
6161

6262
<br>
6363

‎browser-extensions/chrome/table-sort-js.zip‎

31 Bytes
Binary file not shown.

‎browser-extensions/chrome/table-sort.js‎

Lines changed: 36 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
1-
/*
1+
/*
22
table-sort-js
33
Author: Lee Wannacott
4-
Licence: MIT License Copyright (c) 2021 Lee Wannacott
5-
4+
Licence: MIT License Copyright (c) 2021-2024 Lee Wannacott
5+
66
GitHub Repository: https://github.com/LeeWannacott/table-sort-js
7-
npm package: https://www.npmjs.com/package/table-sort-js
8-
Demo: https://leewannacott.github.io/Portfolio/#/GitHub
9-
Install:
10-
Frontend: <script src="https://leewannacott.github.io/table-sort-js/table-sort.js"></script> or
11-
Download this file and add <script src="table-sort.js"></script> to your HTML
12-
Backend: npm install table-sort-js and use require("../node_modules/table-sort-js/table-sort.js")
7+
138
Instructions:
9+
Load as script:
10+
<script src="https://cdn.jsdelivr.net/npm/table-sort-js/table-sort.min.js"></script>
1411
Add class="table-sort" to tables you'd like to make sortable
1512
Click on the table headers to sort them.
1613
*/
@@ -139,8 +136,10 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
139136
table.hasClass = {
140137
noClassInfer: sortableTable.classList.contains("no-class-infer"),
141138
cellsSort: sortableTable.classList.contains("cells-sort"),
142-
tableArrows: sortableTable.classList.contains("table-arrows"),
143139
rememberSort: sortableTable.classList.contains("remember-sort"),
140+
tableArrows: Array.from(sortableTable.classList).filter((item) =>
141+
item.includes("table-arrows")
142+
),
144143
};
145144
for (
146145
let headerIndex = 0;
@@ -390,47 +389,36 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
390389
return sortAscending(b, a);
391390
}
392391

393-
function clearArrows(arrowUp, arrowDown, initialArrow = "↕") {
394-
th.innerHTML = th.innerHTML.replace(initialArrow, "");
395-
th.innerHTML = th.innerHTML.replace(arrowUp, "");
396-
th.innerHTML = th.innerHTML.replace(arrowDown, "");
392+
function clearArrows(arrow) {
393+
th.innerHTML = th.innerHTML.replace(arrow.neutral, "");
394+
th.innerHTML = th.innerHTML.replace(arrow.up, "");
395+
th.innerHTML = th.innerHTML.replace(arrow.down, "");
397396
}
398397

399398
if (column.toBeSorted[0] === undefined) {
400399
return;
401400
}
402401

403-
function changeTableArrow(arrowDirection) {
402+
function changeArrowAndSort(arrowDirection, sortDirection) {
404403
if (table.hasClass.tableArrows) {
405-
clearArrows(arrow.up, arrow.down);
404+
clearArrows(arrow);
406405
th.insertAdjacentText("beforeend", arrowDirection);
407406
}
408-
}
409-
410-
function sortColumn(sortDirection) {
411407
column.toBeSorted.sort(sortDirection, {
412408
numeric: !isAlphaSort,
413409
ignorePunctuation: !isPunctSort,
414410
});
415411
}
416412

417413
if (timesClickedColumn === 1) {
418-
if (desc) {
419-
changeTableArrow(arrow.down);
420-
sortColumn(sortDescending);
421-
} else {
422-
changeTableArrow(arrow.up);
423-
sortColumn(sortAscending);
424-
}
414+
desc
415+
? changeArrowAndSort(arrow.down, sortDescending)
416+
: changeArrowAndSort(arrow.up, sortAscending);
425417
} else if (timesClickedColumn === 2) {
426418
timesClickedColumn = 0;
427-
if (desc) {
428-
changeTableArrow(arrow.up);
429-
sortColumn(sortAscending);
430-
} else {
431-
changeTableArrow(arrow.down);
432-
sortColumn(sortDescending);
433-
}
419+
desc
420+
? changeArrowAndSort(arrow.up, sortAscending)
421+
: changeArrowAndSort(arrow.down, sortDescending);
434422
}
435423
return timesClickedColumn;
436424
}
@@ -524,12 +512,21 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
524512
columnIndexesClicked
525513
) {
526514
const desc = th.classList.contains("order-by-desc");
527-
const initialArrow = " ↕";
528-
const arrow = { up: " ↑", down: " ↓" };
529-
const fillValue = "!X!Y!Z!";
530-
531-
if (table.hasClass.tableArrows) {
532-
th.insertAdjacentText("beforeend", initialArrow);
515+
let fillValue = "!X!Y!Z!";
516+
let arrow = { up: " ↑", neutral: " ↕", down: " ↓" };
517+
if (table.hasClass.tableArrows[0]) {
518+
if (table.hasClass.tableArrows[0].split("-").length > 2) {
519+
// Array.from to support utf-8 strings e.g emojis
520+
let customArrow = Array.from(
521+
table.hasClass.tableArrows[0].split("-")[2]
522+
);
523+
customArrow = customArrow.map((i) => " " + i);
524+
console.log(customArrow);
525+
if (customArrow.length === 3) {
526+
[arrow.up, arrow.neutral, arrow.down] = [...customArrow];
527+
}
528+
}
529+
th.insertAdjacentText("beforeend", arrow.neutral);
533530
}
534531

535532
let timesClickedColumn = 0;

‎browser-extensions/firefox/table-sort-js.zip‎

31 Bytes
Binary file not shown.

‎browser-extensions/firefox/table-sort.js‎

Lines changed: 36 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
1-
/*
1+
/*
22
table-sort-js
33
Author: Lee Wannacott
4-
Licence: MIT License Copyright (c) 2021 Lee Wannacott
5-
4+
Licence: MIT License Copyright (c) 2021-2024 Lee Wannacott
5+
66
GitHub Repository: https://github.com/LeeWannacott/table-sort-js
7-
npm package: https://www.npmjs.com/package/table-sort-js
8-
Demo: https://leewannacott.github.io/Portfolio/#/GitHub
9-
Install:
10-
Frontend: <script src="https://leewannacott.github.io/table-sort-js/table-sort.js"></script> or
11-
Download this file and add <script src="table-sort.js"></script> to your HTML
12-
Backend: npm install table-sort-js and use require("../node_modules/table-sort-js/table-sort.js")
7+
138
Instructions:
9+
Load as script:
10+
<script src="https://cdn.jsdelivr.net/npm/table-sort-js/table-sort.min.js"></script>
1411
Add class="table-sort" to tables you'd like to make sortable
1512
Click on the table headers to sort them.
1613
*/
@@ -139,8 +136,10 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
139136
table.hasClass = {
140137
noClassInfer: sortableTable.classList.contains("no-class-infer"),
141138
cellsSort: sortableTable.classList.contains("cells-sort"),
142-
tableArrows: sortableTable.classList.contains("table-arrows"),
143139
rememberSort: sortableTable.classList.contains("remember-sort"),
140+
tableArrows: Array.from(sortableTable.classList).filter((item) =>
141+
item.includes("table-arrows")
142+
),
144143
};
145144
for (
146145
let headerIndex = 0;
@@ -390,47 +389,36 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
390389
return sortAscending(b, a);
391390
}
392391

393-
function clearArrows(arrowUp, arrowDown, initialArrow = "↕") {
394-
th.innerHTML = th.innerHTML.replace(initialArrow, "");
395-
th.innerHTML = th.innerHTML.replace(arrowUp, "");
396-
th.innerHTML = th.innerHTML.replace(arrowDown, "");
392+
function clearArrows(arrow) {
393+
th.innerHTML = th.innerHTML.replace(arrow.neutral, "");
394+
th.innerHTML = th.innerHTML.replace(arrow.up, "");
395+
th.innerHTML = th.innerHTML.replace(arrow.down, "");
397396
}
398397

399398
if (column.toBeSorted[0] === undefined) {
400399
return;
401400
}
402401

403-
function changeTableArrow(arrowDirection) {
402+
function changeArrowAndSort(arrowDirection, sortDirection) {
404403
if (table.hasClass.tableArrows) {
405-
clearArrows(arrow.up, arrow.down);
404+
clearArrows(arrow);
406405
th.insertAdjacentText("beforeend", arrowDirection);
407406
}
408-
}
409-
410-
function sortColumn(sortDirection) {
411407
column.toBeSorted.sort(sortDirection, {
412408
numeric: !isAlphaSort,
413409
ignorePunctuation: !isPunctSort,
414410
});
415411
}
416412

417413
if (timesClickedColumn === 1) {
418-
if (desc) {
419-
changeTableArrow(arrow.down);
420-
sortColumn(sortDescending);
421-
} else {
422-
changeTableArrow(arrow.up);
423-
sortColumn(sortAscending);
424-
}
414+
desc
415+
? changeArrowAndSort(arrow.down, sortDescending)
416+
: changeArrowAndSort(arrow.up, sortAscending);
425417
} else if (timesClickedColumn === 2) {
426418
timesClickedColumn = 0;
427-
if (desc) {
428-
changeTableArrow(arrow.up);
429-
sortColumn(sortAscending);
430-
} else {
431-
changeTableArrow(arrow.down);
432-
sortColumn(sortDescending);
433-
}
419+
desc
420+
? changeArrowAndSort(arrow.up, sortAscending)
421+
: changeArrowAndSort(arrow.down, sortDescending);
434422
}
435423
return timesClickedColumn;
436424
}
@@ -524,12 +512,21 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
524512
columnIndexesClicked
525513
) {
526514
const desc = th.classList.contains("order-by-desc");
527-
const initialArrow = " ↕";
528-
const arrow = { up: " ↑", down: " ↓" };
529-
const fillValue = "!X!Y!Z!";
530-
531-
if (table.hasClass.tableArrows) {
532-
th.insertAdjacentText("beforeend", initialArrow);
515+
let fillValue = "!X!Y!Z!";
516+
let arrow = { up: " ↑", neutral: " ↕", down: " ↓" };
517+
if (table.hasClass.tableArrows[0]) {
518+
if (table.hasClass.tableArrows[0].split("-").length > 2) {
519+
// Array.from to support utf-8 strings e.g emojis
520+
let customArrow = Array.from(
521+
table.hasClass.tableArrows[0].split("-")[2]
522+
);
523+
customArrow = customArrow.map((i) => " " + i);
524+
console.log(customArrow);
525+
if (customArrow.length === 3) {
526+
[arrow.up, arrow.neutral, arrow.down] = [...customArrow];
527+
}
528+
}
529+
th.insertAdjacentText("beforeend", arrow.neutral);
533530
}
534531

535532
let timesClickedColumn = 0;

‎npm/README.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,13 @@ Examples on using table-sort-js with frontend frameworks such as [React.js](http
5151

5252
#### Classes:
5353

54-
| &lt;table&gt; classes | Description |
55-
| --------------------- | ------------------------------------------------------------------------------------------------------------- |
56-
| "table-sort" | Make the table sortable! (Words, numbers, dates, file sizes)... |
57-
| "no-class-infer" | Turns off inference for adding sort classes automatically i.e (file-size-sort, runtime-sort, dates-dmy-sort). |
58-
| "table-arrows" | Display ascending or descending triangles. |
59-
| "remember-sort" | If clicking on different columns remembers sort of the original column. |
60-
| "cells-sort" | sort cells (td) rather than table rows (tr); useful for keeping table rows with classes/attributes in place. |
54+
| &lt;table&gt; classes | Description |
55+
| --------------------- | ------------------------------------------------------------------------------------------------------------ |
56+
| "table-sort" | Make the table sortable! (Words, numbers, dates, file sizes)... |
57+
| "table-arrows" | Display ascending or descending arrows. Supports custom arrows; example: "table-arrows-👆🤙👇" |
58+
| "no-class-infer" | Turns off inference for adding sort classes automatically e.g (file-size-sort, dates-dmy-sort), etc. |
59+
| "remember-sort" | If clicking on different columns remembers sort of the original column. |
60+
| "cells-sort" | sort cells (td) rather than table rows (tr); useful for keeping table rows with classes/attributes in place. |
6161

6262
<br>
6363

‎npm/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "table-sort-js",
3-
"version": "1.21.0",
3+
"version": "1.22.0",
44
"description": "A JavaScript client-side HTML table sorting library with no dependencies required.",
55
"license": "MIT",
66
"repository": "LeeWannacott/table-sort-js",

0 commit comments

Comments
 (0)