npm release 1.10.2; added onload-sort class for <th>.

browser-extension/manifest.json

@@ -1,12 +1,10 @@
 {
   "manifest_version": 2,
-  "author":"Lee Wannacott",
+  "author": "Lee Wannacott",
   "name": "table-sort-js",
   "version": "0.0",
   "description": "Makes tables sortable using https://github.com/LeeWannacott/table-sort-js",
-  "icons": 
-    { "48": "icons/t.png" }
-  ,
+  "icons": { "48": "icons/t.png" },
   "browser_action": {
     "default_icon": "./icons/t.png",
     "default_title": "table-sort",
@@ -19,7 +17,7 @@
         "*://*.mozilla.org/*",
         "https://github.com/*/*/actions/runs/*/usage"
       ],
-      "js": ["addTableSortClass.js","getTableHeaders.js","table-sort.js"]
+      "js": ["addTableSortClass.js", "getTableHeaders.js", "table-sort.js"]
     }
   ]
 }

browser-extension/popup/table-options.html

@@ -12,6 +12,6 @@
       <button>table3</button>
       <button>table4</button>
     </div>
-    <script src="../setButtons.js"> </script>
+    <script src="../setButtons.js"></script>
   </body>
 </html>

browser-extension/setButtons.js

@@ -1,11 +1,10 @@
 // let tables = window.document.querySelectorAll("table");
 // console.log(getTableHeaders())
 let headers = document.querySelectorAll("table th");
-console.log(headers)
+console.log(headers);
 let headerNames = Array.from(headers).map((header) => header.innerText);
 console.log("nnnn");
 
-
 headerNames.forEach((name) => {
   const btn = document.createElement("button");
   console.log(name);
@@ -14,4 +13,4 @@ headerNames.forEach((name) => {
   document.querySelector("#popup-content").appendChild(btn);
   let test = document.querySelector("#popup-content");
   console.log(test);
-})
+});

npm/README.md

@@ -51,10 +51,11 @@ Refer to the documenation for examples on how to use table-sort-js with [HTML](h
 | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
 | "order-by-desc"    | Order by descending on first click. (default is aescending)                                                                             |
 | "data-sort"        | Sort by [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes), e.g <td data-sort="42"> |
+| "onload-sort"      | Sort column on loading of the page. Simulates a click from the user. (can only sort onload for one column)                              |
 | "file-size-sort"   | Sort file sizes(B->TiB) uses the binary prefix. (e.g KiB)                                                                               |
+| "disable-sort"     | Disallow sorting the table by this specific column.                                                                                     |
 | "alpha-sort"       | Sort alphabetically (z11,z2); default is [natural sort](https://en.wikipedia.org/wiki/Natural_sort_order) (z2,z11).                     |
 | "punct-sort"       | Sort punctuation; default ignores punctuation.                                                                                          |
-| "disable-sort"     | Disallow sorting the table by this specific column.                                                                                     |
 
 #### Development:
 

npm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "table-sort-js",
-  "version": "1.9.2",
+  "version": "1.10.2",
   "description": "A JavaScript client-side HTML table sorting library with no dependencies required.",
   "license": "MIT",
   "repository": "LeeWannacott/table-sort-js",

npm/table-sort.js

@@ -35,26 +35,32 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
     }
   }
 
-  function makeTableSortable(sortableTable) {
+  function createMissingTableHead(sortableTable) {
     let createTableHead;
-    let tableBody;
+    if (testingTableSortJS === true) {
+      createTableHead = domDocumentWindow.createElement("thead");
+    } else {
+      createTableHead = document.createElement("thead");
+    }
+    createTableHead.appendChild(sortableTable.rows[0]);
+    sortableTable.insertBefore(createTableHead, sortableTable.firstChild);
+  }
+
+  function getTableBody(sortableTable) {
     if (sortableTable.getElementsByTagName("thead").length === 0) {
-      if (testingTableSortJS === true) {
-        createTableHead = domDocumentWindow.createElement("thead");
-      } else {
-        createTableHead = document.createElement("thead");
-      }
-      createTableHead.appendChild(sortableTable.rows[0]);
-      sortableTable.insertBefore(createTableHead, sortableTable.firstChild);
+      createMissingTableHead(sortableTable);
       if (sortableTable.querySelectorAll("tbody").length > 1) {
-        tableBody = sortableTable.querySelectorAll("tbody")[1];
+        return sortableTable.querySelectorAll("tbody")[1];
       } else {
-        tableBody = sortableTable.querySelector("tbody");
+        return sortableTable.querySelector("tbody");
       }
     } else {
-      tableBody = sortableTable.querySelector("tbody");
+      return sortableTable.querySelector("tbody");
     }
+  }
 
+  function makeTableSortable(sortableTable) {
+    const tableBody = getTableBody(sortableTable);
     const tableHead = sortableTable.querySelector("thead");
     const tableHeadHeaders = tableHead.querySelectorAll("th");
 
@@ -320,6 +326,10 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
       getTableData(tableProperties);
       updateTable(tableProperties);
     });
+    let isOnloadSort = th.classList.contains("onload-sort");
+    if (isOnloadSort) {
+      th.click();
+    }
   }
 }
 

public/table-sort.js

@@ -37,18 +37,18 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
 
   function createMissingTableHead(sortableTable) {
     let createTableHead;
-      if (testingTableSortJS === true) {
-        createTableHead = domDocumentWindow.createElement("thead");
-      } else {
-        createTableHead = document.createElement("thead");
-      }
-      createTableHead.appendChild(sortableTable.rows[0]);
-      sortableTable.insertBefore(createTableHead, sortableTable.firstChild);
+    if (testingTableSortJS === true) {
+      createTableHead = domDocumentWindow.createElement("thead");
+    } else {
+      createTableHead = document.createElement("thead");
+    }
+    createTableHead.appendChild(sortableTable.rows[0]);
+    sortableTable.insertBefore(createTableHead, sortableTable.firstChild);
   }
 
   function getTableBody(sortableTable) {
     if (sortableTable.getElementsByTagName("thead").length === 0) {
-      createMissingTableHead(sortableTable)
+      createMissingTableHead(sortableTable);
       if (sortableTable.querySelectorAll("tbody").length > 1) {
         return sortableTable.querySelectorAll("tbody")[1];
       } else {
@@ -326,7 +326,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
       getTableData(tableProperties);
       updateTable(tableProperties);
     });
-    let isOnloadSort =  th.classList.contains("onload-sort");
+    let isOnloadSort = th.classList.contains("onload-sort");
     if (isOnloadSort) {
       th.click();
     }

test/order-by-desc.test.js

@@ -176,9 +176,11 @@ test("visible-tr-sort: example sort only visible trs", () => {
   ).toStrictEqual({ col0: ["row5", "row4", "row2"] });
 });
 
-
 test("onload-sort: testing that it sorts without a click from user", () => {
   expect(
-    createTestTable({ col0: [5, 3, 4, 1, 2] }, { classTags: "order-by-desc onload-sort" })
+    createTestTable(
+      { col0: [5, 3, 4, 1, 2] },
+      { classTags: "order-by-desc onload-sort" }
+    )
   ).toStrictEqual({ col0: ["5", "4", "3", "2", "1"] });
 });