Skip to content

Commit

Permalink
Support custom table-arrows v1.22.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyle-wannacott
kyle-wannacott committed Nov 8, 2024
1 parent db8da7c commit 33deb6d
Show file tree
Hide file tree
Showing 9 changed files with 127 additions and 139 deletions.
14 changes: 7 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,13 +51,13 @@ Examples on using table-sort-js with frontend frameworks such as [React.js](http

#### Classes:

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

<br>

Expand Down
Binary file modified browser-extensions/chrome/table-sort-js.zip
View file
Binary file not shown.
75 changes: 36 additions & 39 deletions browser-extensions/chrome/table-sort.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
/*
/*
table-sort-js
Author: Lee Wannacott
Licence: MIT License Copyright (c) 2021 Lee Wannacott
Licence: MIT License Copyright (c) 2021-2024 Lee Wannacott
GitHub Repository: https://github.com/LeeWannacott/table-sort-js
npm package: https://www.npmjs.com/package/table-sort-js
Demo: https://leewannacott.github.io/Portfolio/#/GitHub
Install:
Frontend: <script src="https://leewannacott.github.io/table-sort-js/table-sort.js"></script> or
Download this file and add <script src="table-sort.js"></script> to your HTML
Backend: npm install table-sort-js and use require("../node_modules/table-sort-js/table-sort.js")
Instructions:
Load as script:
<script src="https://cdn.jsdelivr.net/npm/table-sort-js/table-sort.min.js"></script>
Add class="table-sort" to tables you'd like to make sortable
Click on the table headers to sort them.
*/
Expand Down Expand Up @@ -139,8 +136,10 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
table.hasClass = {
noClassInfer: sortableTable.classList.contains("no-class-infer"),
cellsSort: sortableTable.classList.contains("cells-sort"),
tableArrows: sortableTable.classList.contains("table-arrows"),
rememberSort: sortableTable.classList.contains("remember-sort"),
tableArrows: Array.from(sortableTable.classList).filter((item) =>
item.includes("table-arrows")
),
};
for (
let headerIndex = 0;
Expand Down Expand Up @@ -390,47 +389,36 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
return sortAscending(b, a);
}

function clearArrows(arrowUp, arrowDown, initialArrow = "↕") {
th.innerHTML = th.innerHTML.replace(initialArrow, "");
th.innerHTML = th.innerHTML.replace(arrowUp, "");
th.innerHTML = th.innerHTML.replace(arrowDown, "");
function clearArrows(arrow) {
th.innerHTML = th.innerHTML.replace(arrow.neutral, "");
th.innerHTML = th.innerHTML.replace(arrow.up, "");
th.innerHTML = th.innerHTML.replace(arrow.down, "");
}

if (column.toBeSorted[0] === undefined) {
return;
}

function changeTableArrow(arrowDirection) {
function changeArrowAndSort(arrowDirection, sortDirection) {
if (table.hasClass.tableArrows) {
clearArrows(arrow.up, arrow.down);
clearArrows(arrow);
th.insertAdjacentText("beforeend", arrowDirection);
}
}

function sortColumn(sortDirection) {
column.toBeSorted.sort(sortDirection, {
numeric: !isAlphaSort,
ignorePunctuation: !isPunctSort,
});
}

if (timesClickedColumn === 1) {
if (desc) {
changeTableArrow(arrow.down);
sortColumn(sortDescending);
} else {
changeTableArrow(arrow.up);
sortColumn(sortAscending);
}
desc
? changeArrowAndSort(arrow.down, sortDescending)
: changeArrowAndSort(arrow.up, sortAscending);
} else if (timesClickedColumn === 2) {
timesClickedColumn = 0;
if (desc) {
changeTableArrow(arrow.up);
sortColumn(sortAscending);
} else {
changeTableArrow(arrow.down);
sortColumn(sortDescending);
}
desc
? changeArrowAndSort(arrow.up, sortAscending)
: changeArrowAndSort(arrow.down, sortDescending);
}
return timesClickedColumn;
}
Expand Down Expand Up @@ -524,12 +512,21 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
columnIndexesClicked
) {
const desc = th.classList.contains("order-by-desc");
const initialArrow = " ↕";
const arrow = { up: " ↑", down: " ↓" };
const fillValue = "!X!Y!Z!";

if (table.hasClass.tableArrows) {
th.insertAdjacentText("beforeend", initialArrow);
let fillValue = "!X!Y!Z!";
let arrow = { up: " ↑", neutral: " ↕", down: " ↓" };
if (table.hasClass.tableArrows[0]) {
if (table.hasClass.tableArrows[0].split("-").length > 2) {
// Array.from to support utf-8 strings e.g emojis
let customArrow = Array.from(
table.hasClass.tableArrows[0].split("-")[2]
);
customArrow = customArrow.map((i) => " " + i);
console.log(customArrow);
if (customArrow.length === 3) {
[arrow.up, arrow.neutral, arrow.down] = [...customArrow];
}
}
th.insertAdjacentText("beforeend", arrow.neutral);
}

let timesClickedColumn = 0;
Expand Down
Binary file modified browser-extensions/firefox/table-sort-js.zip
View file
Binary file not shown.
75 changes: 36 additions & 39 deletions browser-extensions/firefox/table-sort.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
/*
/*
table-sort-js
Author: Lee Wannacott
Licence: MIT License Copyright (c) 2021 Lee Wannacott
Licence: MIT License Copyright (c) 2021-2024 Lee Wannacott
GitHub Repository: https://github.com/LeeWannacott/table-sort-js
npm package: https://www.npmjs.com/package/table-sort-js
Demo: https://leewannacott.github.io/Portfolio/#/GitHub
Install:
Frontend: <script src="https://leewannacott.github.io/table-sort-js/table-sort.js"></script> or
Download this file and add <script src="table-sort.js"></script> to your HTML
Backend: npm install table-sort-js and use require("../node_modules/table-sort-js/table-sort.js")
Instructions:
Load as script:
<script src="https://cdn.jsdelivr.net/npm/table-sort-js/table-sort.min.js"></script>
Add class="table-sort" to tables you'd like to make sortable
Click on the table headers to sort them.
*/
Expand Down Expand Up @@ -139,8 +136,10 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
table.hasClass = {
noClassInfer: sortableTable.classList.contains("no-class-infer"),
cellsSort: sortableTable.classList.contains("cells-sort"),
tableArrows: sortableTable.classList.contains("table-arrows"),
rememberSort: sortableTable.classList.contains("remember-sort"),
tableArrows: Array.from(sortableTable.classList).filter((item) =>
item.includes("table-arrows")
),
};
for (
let headerIndex = 0;
Expand Down Expand Up @@ -390,47 +389,36 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
return sortAscending(b, a);
}

function clearArrows(arrowUp, arrowDown, initialArrow = "↕") {
th.innerHTML = th.innerHTML.replace(initialArrow, "");
th.innerHTML = th.innerHTML.replace(arrowUp, "");
th.innerHTML = th.innerHTML.replace(arrowDown, "");
function clearArrows(arrow) {
th.innerHTML = th.innerHTML.replace(arrow.neutral, "");
th.innerHTML = th.innerHTML.replace(arrow.up, "");
th.innerHTML = th.innerHTML.replace(arrow.down, "");
}

if (column.toBeSorted[0] === undefined) {
return;
}

function changeTableArrow(arrowDirection) {
function changeArrowAndSort(arrowDirection, sortDirection) {
if (table.hasClass.tableArrows) {
clearArrows(arrow.up, arrow.down);
clearArrows(arrow);
th.insertAdjacentText("beforeend", arrowDirection);
}
}

function sortColumn(sortDirection) {
column.toBeSorted.sort(sortDirection, {
numeric: !isAlphaSort,
ignorePunctuation: !isPunctSort,
});
}

if (timesClickedColumn === 1) {
if (desc) {
changeTableArrow(arrow.down);
sortColumn(sortDescending);
} else {
changeTableArrow(arrow.up);
sortColumn(sortAscending);
}
desc
? changeArrowAndSort(arrow.down, sortDescending)
: changeArrowAndSort(arrow.up, sortAscending);
} else if (timesClickedColumn === 2) {
timesClickedColumn = 0;
if (desc) {
changeTableArrow(arrow.up);
sortColumn(sortAscending);
} else {
changeTableArrow(arrow.down);
sortColumn(sortDescending);
}
desc
? changeArrowAndSort(arrow.up, sortAscending)
: changeArrowAndSort(arrow.down, sortDescending);
}
return timesClickedColumn;
}
Expand Down Expand Up @@ -524,12 +512,21 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
columnIndexesClicked
) {
const desc = th.classList.contains("order-by-desc");
const initialArrow = " ↕";
const arrow = { up: " ↑", down: " ↓" };
const fillValue = "!X!Y!Z!";

if (table.hasClass.tableArrows) {
th.insertAdjacentText("beforeend", initialArrow);
let fillValue = "!X!Y!Z!";
let arrow = { up: " ↑", neutral: " ↕", down: " ↓" };
if (table.hasClass.tableArrows[0]) {
if (table.hasClass.tableArrows[0].split("-").length > 2) {
// Array.from to support utf-8 strings e.g emojis
let customArrow = Array.from(
table.hasClass.tableArrows[0].split("-")[2]
);
customArrow = customArrow.map((i) => " " + i);
console.log(customArrow);
if (customArrow.length === 3) {
[arrow.up, arrow.neutral, arrow.down] = [...customArrow];
}
}
th.insertAdjacentText("beforeend", arrow.neutral);
}

let timesClickedColumn = 0;
Expand Down
14 changes: 7 additions & 7 deletions npm/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,13 +51,13 @@ Examples on using table-sort-js with frontend frameworks such as [React.js](http

#### Classes:

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

<br>

Expand Down
2 changes: 1 addition & 1 deletion npm/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "table-sort-js",
"version": "1.21.0",
"version": "1.22.0",
"description": "A JavaScript client-side HTML table sorting library with no dependencies required.",
"license": "MIT",
"repository": "LeeWannacott/table-sort-js",
Expand Down
Loading

0 comments on commit 33deb6d

Please sign in to comment.