table-sort-js - npm Package Compare versions

Comparing version 1.1.6 to 1.2.7

package.json

 {
 "name": "table-sort-js",
-"version": "1.1.6",
+"version": "1.2.7",
 "description": "A JavaScript client-side HTML table sorting library with no dependencies required.",
@@ -12,3 +12,2 @@ "license": "MIT",
     "sort",
-    "table-sort-js",
     "sort-table-js",
@@ -19,6 +18,5 @@ "table-sort",
     "HTML",
-    "npm",
     "JavaScript",
     "js",
-    "table sort",
+    "tablesort",
     "table sort js",
@@ -25,0 +23,0 @@ "js sort table",

README.md

@@ -29,3 +29,3 @@ ![table-sort-js](https://img.shields.io/npm/v/table-sort-js) : https://www.npmjs.com/package/table-sort-js
             <td>John</td>
-            <td>1977</td>
+            <td>1977/12/4</td>
             <td>1</td>
@@ -36,3 +36,3 @@ </tr>
             <td>Frank</td>
-            <td>1976</td>
+            <td>1976/10/27</td>
             <td>10</td>
@@ -43,5 +43,18 @@ </tr>
             <td>Jason</td>
-            <td>1978</td>
+            <td>1978/4/6</td>
             <td>100</td>
           </tr>
+          <tr>
+            <td>Michael</td>
+            <td>Jackson</td>
+            <td>1958/8/29</td>
+            <td>54</td>
+          </tr>
+
+          <tr>
+            <td>Ben</td>
+            <td>Tenison</td>
+            <td>1994/7/21</td>
+            <td>134</td>
+          </tr>
         </tbody>
@@ -58,1 +71,3 @@ </table>
 * Example of use: https://www.cssscript.com/minimal-table-sorter/
+
+* Add `table-arrows` class to display ascending or descending triangle.

table-sort.js

@@ -9,9 +9,6 @@ /*
 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:
@@ -23,123 +20,149 @@ Add class="table-sort" to tables you'd like to make sortable
 function tableSortJs() {
-    const columnData = [];
-    const dictOfColumnIndexAndTableRow = {};
-    for (let sortableTable of document.getElementsByTagName("table")) {
-        if (sortableTable.classList.contains("table-sort")) {
-            if (sortableTable.getElementsByTagName("thead").length === 0) {
-                const the = document.createElement("thead");
-                the.appendChild(sortableTable.rows[0]);
-                sortableTable.insertBefore(the, sortableTable.firstChild);
-            }
+  const columnIndexAndTableRow = {};
 
-            const tableHead = sortableTable.querySelector("thead");
-            const tableBody = sortableTable.querySelector("tbody");
-            const tableHeadHeaders = tableHead.querySelectorAll("th");
+  for (let table of document.getElementsByTagName("table")) {
+    if (table.classList.contains("table-sort")) {
+      makeTableSortable(table);
+    }
+  }
 
+  function makeTableSortable(sortableTable) {
+    if (sortableTable.getElementsByTagName("thead").length === 0) {
+      const the = document.createElement("thead");
+      the.appendChild(sortableTable.rows[0]);
+      sortableTable.insertBefore(the, sortableTable.firstChild);
+    }
 
-            // Display a mouse pointer on hover over table headers.
-            tableHead.addEventListener("mouseover", function (event) {
-                setCursor(tableHead, "pointer");
-            });
-            function setCursor(tag, cursorStyle) {
-                var elem;
-                if (sortableTable.getElementsByTagName && (elem = tag)) {
-                    if (elem.style) {
-                        elem.style.cursor = cursorStyle;
-                    }
-                }
+    const tableHead = sortableTable.querySelector("thead");
+    const tableBody = sortableTable.querySelector("tbody");
+    const tableHeadHeaders = tableHead.querySelectorAll("th");
+
+    tableHead.style.cursor = "pointer";
+
+    let columnIndexesClicked= [];
+    for (let [columnIndex, th] of tableHeadHeaders.entries()) {
+      let timesClickedColumn = 0;
+
+      th.addEventListener("click", function () {
+
+        const tableRows = tableBody.querySelectorAll("tr");
+        const columnData = [];
+
+        // Checking if user has clicked different column from the first column if yes reset times clicked.
+        columnIndexesClicked.push(columnIndex);
+        if(timesClickedColumn === 1 && columnIndexesClicked.length > 1) {
+          const lastColumnClicked = columnIndexesClicked[columnIndexesClicked.length -1];
+          const secondLastColumnClicked = columnIndexesClicked[columnIndexesClicked.length -2];
+          if(lastColumnClicked !== secondLastColumnClicked) {
+            timesClickedColumn = 0;
+            columnIndexesClicked.shift()
+          }
+        }
+
+        timesClickedColumn += 1;
+        getTableData();
+        updateTable();
+
+        function updateTable() {
+          for (let [i, tr] of tableRows.entries()) {
+            tr.innerHTML = columnIndexAndTableRow[columnData[i]];
+          }
+        }
+
+        function getTableData() {
+          for (let [i, tr] of tableRows.entries()) {
+            let tdInnerHTML = tr.querySelectorAll('td').item(columnIndex).innerHTML;
+            if (tdInnerHTML.trim() !== "") {
+              columnData.push(tdInnerHTML+ '#' + i);
+              columnIndexAndTableRow[tdInnerHTML+ '#' + i] = tr.innerHTML;
+            } else {
+              // Fill in blank table cells dict key with filler value.
+              columnData.push("!X!Y!Z!#" + i);
+              columnIndexAndTableRow["!X!Y!Z!#" + i] = tr.innerHTML;
             }
+          }
 
-            for (let [columnIndex, th] of tableHeadHeaders.entries("table")) {
-                let timesClickedColumn = 0;
+          function naturalSortAescending(a, b) {
+            if (a.includes("X!Y!Z!#")) {
+              return 1;
+            } else if (b.includes("X!Y!Z!#")) {
+              return -1;
+            } else {
+              return a.localeCompare(
+                b,
+                navigator.languages[0] || navigator.language,
+                { numeric: true, ignorePunctuation: true }
+              );
+            }
+          }
 
-                th.addEventListener("click", function () {
-                    timesClickedColumn += 1;
+          function naturalSortDescending(a, b) {
+            return naturalSortAescending(b, a);
+          }
 
-                    function getTableDataOnClick() {
-                        const tableRows = tableBody.querySelectorAll("tr");
-                        for (let [i, tr] of tableRows.entries()) {
-                            if (
-                                tr.querySelectorAll("td").item(columnIndex)
-                                    .innerHTML !== ""
-                            ) {
-                                columnData.push(
-                                    tr.querySelectorAll("td").item(columnIndex)
-                                        .innerHTML +
-                                        "#" +
-                                        i
-                                );
-                                dictOfColumnIndexAndTableRow[
-                                    tr.querySelectorAll("td").item(columnIndex)
-                                        .innerHTML +
-                                        "#" +
-                                        i
-                                ] = tr.innerHTML;
-                            } else {
-                                // Fill in blank table cells with a value(0)
-                                columnData.push("0#" + i);
-                                dictOfColumnIndexAndTableRow["0#" + i] =
-                                    tr.innerHTML;
-                            }
-                        }
-                        function naturalSortAescending(a, b) {
-                            return a.localeCompare(
-                                b,
-                                navigator.languages[0] || navigator.language,
-                                { numeric: true, ignorePunctuation: true }
-                            );
-                        }
-                        function naturalSortDescending(a, b) {
-                            return naturalSortAescending(b, a);
-                        }
+          function clearArrows(arrowUp = "▲", arrowDown = "▼") {
+            th.innerText = th.innerText.replace(arrowUp, "");
+            th.innerText = th.innerText.replace(arrowDown, "");
+          }
 
-                        // Sort naturally; default aescending unless th contains 'order-by-desc' as className.
-                        if (typeof columnData[0] !== "undefined") {
-                            if (
-                                th.classList.contains("order-by-desc")  &&
-                                timesClickedColumn === 1
-                            ) {
-                                columnData.sort(naturalSortDescending, {
-                                    numeric: true,
-                                    ignorePunctuation: true,
-                                });
-                            } else if (
-                                th.classList.contains("order-by-desc")  &&
-                                timesClickedColumn === 2
-                            ) {
-                                columnData.sort(naturalSortAescending, {
-                                    numeric: true,
-                                    ignorePunctuation: true,
-                                });
-                                timesClickedColumn = 0;
-                            } else if (timesClickedColumn === 1) {
-                                columnData.sort(naturalSortAescending);
-                            } else if (timesClickedColumn === 2) {
-                                columnData.sort(naturalSortDescending);
-                                timesClickedColumn = 0;
-                            }
-                        }
-                    }
-                    getTableDataOnClick();
-                    function returnSortedTable() {
-                        const tableRows = tableBody.querySelectorAll("tr");
-                        for (let [i, tr] of tableRows.entries()) {
-                            tr.innerHTML =
-                                dictOfColumnIndexAndTableRow[columnData[i]];
-                        }
-                        columnData.length = 0;
-                    }
-                    returnSortedTable();
-                });
+          let arrowUp = " ▲";
+          let arrowDown = " ▼";
+
+          // Sort naturally; default aescending unless th contains 'order-by-desc' as className.
+          if (columnData[0] === undefined) {
+            return;
+          }
+
+          let desc = th.classList.contains('order-by-desc');
+          let tableArrows = sortableTable.classList.contains('table-arrows');
+
+          if (timesClickedColumn === 1) {
+            if (desc) {
+              if (tableArrows) {
+                clearArrows(arrowUp, arrowDown);
+                th.insertAdjacentText("beforeend", arrowDown);
+              }
+              columnData.sort(naturalSortDescending, {
+                numeric: true,
+                ignorePunctuation: true,
+              });
+            } else {
+              if (tableArrows) {
+                clearArrows(arrowUp, arrowDown);
+                th.insertAdjacentText("beforeend", arrowUp);
+              }
+              columnData.sort(naturalSortAescending);
             }
+          } else if (timesClickedColumn === 2) {
+            timesClickedColumn = 0;
+            if (desc) {
+              if (tableArrows) {
+                clearArrows(arrowUp, arrowDown);
+                th.insertAdjacentText("beforeend", arrowUp);
+              }
+              columnData.sort(naturalSortAescending, {
+                numeric: true,
+                ignorePunctuation: true,
+              });
+            } else {
+              if (tableArrows) {
+                clearArrows(arrowUp, arrowDown);
+                th.insertAdjacentText("beforeend", arrowDown);
+              }
+              columnData.sort(naturalSortDescending);
+            }
+          }
         }
+      });
     }
+  }
 }
 
 if (
-    document.readyState === "complete" ||
-    document.readyState === "interactive"
+  document.readyState === "complete" ||
+  document.readyState === "interactive"
 ) {
-    tableSortJs();
+  tableSortJs();
 } else if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", tableSortJs, false);
-}
+  document.addEventListener("DOMContentLoaded", tableSortJs, false);
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

144

increased by10.77%

Number of lines in readme file

70

increased by27.27%

Worsened metrics

Total package byte prevSize

10796

decreased by-1.7%

No dependency changes