Support for custom table-arrows (#139)

* Progress on custom arrows pt1. * custom arrows working. * Make handle some emojis. * tidy up some stuff.
kyle-wannacott · Nov 8, 2024 · db8da7c · db8da7c
1 parent 327dfd1
commit db8da7c
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -54,8 +54,8 @@ Examples on using table-sort-js with frontend frameworks such as [React.js](http
 | &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.                                                                    |
+| "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
@@ -7,7 +7,8 @@
     <script type="text/javascript" src="./table-sort.js"></script>
 
     <h1>Manual testing of table sort js</h1>
-    <table class="table-sort table-arrows">
+    <!--  -->
+    <table class="table-sort table-arrows-👆🤙👇">
         <tr>
           <td>Last Name</td>
           <td>First Name</td>

diff --git 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: <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") 
+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:
   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,47 +392,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;
   }
@@ -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
@@ -84,7 +84,7 @@ export class App extends Component {
             Statistics on public repositories pulled from the GitHub API v3:
           </h6>
           <div>
-            <table className="table table-sort table-bordered table-responsive table-hover">
+            <table className="table table-sort table-arrows-jkl table-bordered table-responsive table-hover">
               <thead className="cw-light">
                 <tr>
                   <th>Repository Name</th>