From db8da7c4548f92e135a0a47357163de9d9bc32ac Mon Sep 17 00:00:00 2001 From: Kyle Wannacott Date: Fri, 8 Nov 2024 13:29:24 +1300 Subject: [PATCH] Support for custom table-arrows (#139) * Progress on custom arrows pt1. * custom arrows working. * Make handle some emojis. * tidy up some stuff. --- README.md | 4 +-- public/index.html | 3 +- public/table-sort.js | 70 ++++++++++++++++++++++---------------------- src/test-table.js | 2 +- 4 files changed, 40 insertions(+), 39 deletions(-) diff --git a/README.md b/README.md index c458b05..40c6a50 100644 --- a/README.md +++ b/README.md @@ -54,8 +54,8 @@ Examples on using table-sort-js with frontend frameworks such as [React.js](http | <table> 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. | +| "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. | diff --git a/public/index.html b/public/index.html index e8b6483..3bbb8e4 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,8 @@

Manual testing of table sort js

- + +
diff --git a/public/table-sort.js b/public/table-sort.js index 7004923..62cd364 100644 --- a/public/table-sort.js +++ b/public/table-sort.js @@ -1,15 +1,15 @@ -/* +/* table-sort-js Author: Lee Wannacott -Licence: MIT License Copyright (c) 2021 Lee Wannacott - +Licence: MIT License Copyright (c) 2021 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: or -Download this file and add to your HTML -Backend: npm install table-sort-js and use require("../node_modules/table-sort-js/table-sort.js") +Download this file and add to your HTML +Backend: npm install table-sort-js and use require("../node_modules/table-sort-js/table-sort.js") Instructions: Add class="table-sort" to tables you'd like to make sortable Click on the table headers to sort them. @@ -139,8 +139,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; @@ -390,24 +392,21 @@ 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, @@ -415,22 +414,14 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { } 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; } @@ -524,12 +515,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; diff --git a/src/test-table.js b/src/test-table.js index bc5e09a..466f662 100644 --- a/src/test-table.js +++ b/src/test-table.js @@ -84,7 +84,7 @@ export class App extends Component { Statistics on public repositories pulled from the GitHub API v3:
-
Last Name First Name
+
Repository Name