custom arrows working.

kyle-wannacott · Nov 5, 2024 · b24dec1 · b24dec1
1 parent 2ffdb2f
commit b24dec1
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 36 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,7 @@
     <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
@@ -139,8 +139,11 @@ 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: sortableTable.classList.contains("table-arrows"),
+      tableArrows: Array.from(sortableTable.classList).filter((item) =>
+        item.includes("table-arrows")
+      ),
     };
     for (
       let headerIndex = 0;
@@ -400,37 +403,26 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
       return;
     }
 
-    function changeTableArrow(arrowDirection) {
+    function changeArrowAndSort(arrowDirection, sortDirection) {
       if (table.hasClass.tableArrows) {
         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,20 +516,20 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
     columnIndexesClicked
   ) {
     const desc = th.classList.contains("order-by-desc");
-    const custom_arrows = th.classList.contains("custom-arrows");
-    // for (let word in th.classList) {
-    //   console.log(word);
-    // }
-    let arrow = { neutral: " ↕", up: " ↑", down: " ↓" };
     let fillValue = "!X!Y!Z!";
-    if (custom_arrows) {
-      console.log(custom_arrows);
-      console.log(custom_arrows.split("-"));
-      [arrow.up, arrow.neutral, arrow.down] = custom_arrows.split();
-      th.classList.add("table-arrows");
-    }
-
-    if (table.hasClass.tableArrows) {
+    let arrow = { up: " ↑", neutral: " ↕", down: " ↓" };
+    if (table.hasClass.tableArrows[0]) {
+      if (table.hasClass.tableArrows[0].split("-").length > 2) {
+        var customArrow = table.hasClass.tableArrows[0].split("-")[2];
+        if (customArrow.length === 3) {
+          console.log(table.hasClass.tableArrows[0].split("-"));
+          [arrow.up, arrow.neutral, arrow.down] = [
+            " " + customArrow[0],
+            " " + customArrow[1],
+            " " + customArrow[2],
+          ];
+        }
+      }
       th.insertAdjacentText("beforeend", arrow.neutral);
     }
 

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 custom-arrows 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>