Support <th> tags in table rows. (#129)

Author: kyle-wannacott

browser-extensions/chrome/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "author": "Lee Wannacott",
   "name": "table-sort-js",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "description": "Makes tables sortable using table-sort-js: https://github.com/LeeWannacott/table-sort-js",
   "icons": { "48": "icons/t.png" },
   "browser_action": {

browser-extensions/firefox/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "author": "Lee Wannacott",
   "name": "table-sort-js",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "description": "Makes tables sortable using table-sort-js: https://github.com/LeeWannacott/table-sort-js",
   "icons": { "48": "icons/t.png" },
   "browser_action": {

npm/package.json

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

public/index.html

@@ -11,7 +11,7 @@ <h1>Manual testing of table sort js</h1>
         <tr>
           <td>Last Name</td>
           <td>First Name</td>
-          <td class="order-by-desc">Birth Date</td>
+          <th class="order-by-desc">Birth Date</th>
           <td>Employee ID</td>
           <td>Department</td>
           <td>Runtime</td>
@@ -21,7 +21,7 @@ <h1>Manual testing of table sort js</h1>
           <td>file version</td>
         </tr>
       <tr class="table-row-1">
-        <td>Franklin</td>
+        <th>Franklin</th>
         <td>Benjamin</td>
         <td>1706-1-17</td>
         <td>1</td>
@@ -33,7 +33,7 @@ <h1>Manual testing of table sort js</h1>
         <td>1.18.1</td>
       </tr>
       <tr class="table-row-2">
-        <td>da Vinci</td>
+        <th>da Vinci</th>
         <td>Zarlo</td>
         <td>1452-4-15</td>
         <td>13000</td>
@@ -45,7 +45,7 @@ <h1>Manual testing of table sort js</h1>
         <td>239.123.23</td>
       </tr>
       <tr>
-        <td>Statham</td>
+        <th>Statham</th>
         <td>Jason</td>
         <td>1967-7-26</td>
         <td></td>
@@ -57,7 +57,7 @@ <h1>Manual testing of table sort js</h1>
         <td>3423.342.34</td>
       </tr>
       <tr>
-        <td>Micheal</td>
+        <th>Micheal</th>
         <td>Angelo</td>
         <td>1958-8-21</td>
         <td>54</td>
@@ -70,7 +70,7 @@ <h1>Manual testing of table sort js</h1>
       </tr>
 
       <tr>
-        <td>Ben</td>
+        <th>Ben</th>
         <td></td>
         <td>1994/9/23</td>
         <td>134</td>

public/table-sort.js

@@ -82,7 +82,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
           break;
         }
         const tableColumn = tr
-          .querySelectorAll("td")
+          .querySelectorAll("* > th , * > td")
           .item(
             column.span[columnIndex] === 1
               ? column.spanSum[columnIndex] - 1
@@ -125,11 +125,9 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
       headers: [],
     };
     for (let index of table.theads.keys()) {
-      if (table.theads.item(index).querySelectorAll("th").length == 0) {
-        table.headers.push(table.theads.item(index).querySelectorAll("td"));
-      } else {
-        table.headers.push(table.theads.item(index).querySelectorAll("th"));
-      }
+      table.headers.push(
+        table.theads.item(index).querySelectorAll("* > th , * > td")
+      );
     }
     for (let index of table.bodies.keys()) {
       if (table.bodies.item(index) == null) {
@@ -200,7 +198,9 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
     };
     const numberWithUnitType = /([.0-9]+)\s?(B|KB|KiB|MB|MiB|GB|GiB|TB|TiB)/i;
     for (let [i, tr] of table.visibleRows.entries()) {
-      let fileSizeTd = tr.querySelectorAll("td").item(columnIndex).textContent;
+      let fileSizeTd = tr
+        .querySelectorAll("* > th , * > td")
+        .item(columnIndex).textContent;
       let match = fileSizeTd.match(numberWithUnitType);
       if (match) {
         let number = parseFloat(match[1]);
@@ -465,7 +465,8 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
         "NaN"
       );
     }
-    tr.querySelectorAll("td").item(columnIndex).innerHTML = fileSizeInBytesHTML;
+    tr.querySelectorAll("* > th , * > td").item(columnIndex).innerHTML =
+      fileSizeInBytesHTML;
     return table.hasClass.cellsSort ? tr.innerHTML : tr.outerHTML;
   }
 
@@ -532,7 +533,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
     const column = {
       getColumn: function getColumn(tr, colSpanSum, colSpanData) {
         return tr
-          .querySelectorAll("td")
+          .querySelectorAll("* > th , * > td")
           .item(
             colSpanData[columnIndex] === 1
               ? colSpanSum[columnIndex] - 1