Add support for "disable-sort" class per column (#57)

* Add support for "disable-sort" class per column

* Update documentation

Author: vhtkrk

README.md

@@ -52,6 +52,7 @@ Refer to the documenation for examples how to use table-sort-js with [HTML.](htt
 | "order-by-desc"    | Order by descending on first click. (default is aescending)                                                                             |
 | "file-size"        | Sort file sizes(B->TiB) uses the binary prefix. (e.g KiB)                                                                               |
 | "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"> |
+| "disable-sort"     | Disallow sorting the table by this specific column
 
 #### Development:
 

public/docs/classes.html

@@ -87,7 +87,13 @@ <h2>table-sort-js</h2>
               <td>table-arrows</td>
               <td>
                 Adds up or down arrows to indicate whether column is sorted in
-                aescending or descending order.
+                ascending or descending order.
+              </td>
+            </tr>
+            <tr>
+              <td>remember-sort</td>
+              <td>
+                If clicking on different columns remembers sort of the original column.
               </td>
             </tr>
           </table>
@@ -99,7 +105,7 @@ <h2>table-sort-js</h2>
           >
             <thead>
               <tr>
-                <th>&lt;th class=""></th>
+                <th>&lt;th class=""&gt;</th>
                 <th>Description</th>
               </tr>
             </thead>
@@ -113,7 +119,7 @@ <h2>table-sort-js</h2>
             <tr>
               <td>file-size</td>
               <td>
-                Supports sorting files sizes from bytes to Tebibytes (B -> TiB).
+                Supports sorting files sizes from bytes to Tebibytes (B -&gt; TiB).
                 Can be Metric prefix (e.g 10KB), or Binary prefix(e.g 25KiB) and
                 can contain a space or no space between number and unit type
                 (e.g 25KB or 25 KB). It converts units into numbers (bytes) does
@@ -143,6 +149,12 @@ <h2>table-sort-js</h2>
                   not supported by table-sort-js.
               </td>
             </tr>
+            <tr>
+              <td>disable-sort</td>
+              <td>
+                Disallow sorting the table by this specific column.
+              </td>
+            </tr>
           </table>
         <br>
         <h3>Example using tags:</h3>
@@ -156,23 +168,27 @@ <h3>Example using tags:</h3>
       &lt;th class="data-sort"&gt;data&lt;/th&gt;
       &lt;th class="file-size"&gt;file sizes&lt;/th&gt;
       &lt;th class="order-by-desc"&gt;birth date&lt;/th&gt;
+      &lt;th class="disable-sort"&gt;unsortable&lt;/th&gt;
     &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tbody&gt;
     &lt;tr&gt;
       &lt;td data-sort="2"&gt;sort&lt;/td&gt;
       &lt;td&gt;10KiB&lt;/td&gt;
       &lt;td&gt;1706/1/17&lt;/td&gt;
+      &lt;td&gt;1&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td data-sort="3"&gt;js&lt;/td&gt;
       &lt;td&gt;1MB&lt;/td&gt;
       &lt;td&gt;1835/11/25&lt;/td&gt;
+      &lt;td&gt;2&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td data-sort="1"&gt;table&lt;/td&gt;
       &lt;td&gt;1TB&lt;/td&gt;
       &lt;td&gt;1835/11/30&lt;/td&gt;
+      &lt;td&gt;3&lt;/td&gt;
     &lt;/tr&gt;
   &lt;/tbody&gt;
 &lt;/table&gt;
@@ -184,23 +200,27 @@ <h3>Example using tags:</h3>
       <th class="data-sort">data</th>
       <th class="file-size">file sizes</th>
       <th class="order-by-desc">birth date</th>
+      <th class="disable-sort">unsortable</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td data-sort="2">sort</td>
       <td>10KiB</td>
       <td>1706/1/17</td>
+      <td>1</td>
     </tr>
     <tr>
       <td data-sort="3">js</td>
       <td>1 MB</td>
       <td>1835/11/25</td>
+      <td>2</td>
     </tr>
     <tr>
       <td data-sort="1">table</td>
       <td>1TB</td>
       <td>1835/11/30</td>
+      <td>3</td>
     </tr>
   </tbody>
 </table>

public/index.html

@@ -14,38 +14,44 @@ <h1>Testing table sort js</h1>
           <th>First Name</th>
           <th class="order-by-desc">Birth Date</th>
           <th>Employee ID</th>
+          <th class="disable-sort">Department</th>
         </tr>
       </thead>
       <tr>
         <td>Franklin</td>
         <td>benjamin</td>
         <td>1706,1,17</td>
         <td></td>
+        <td>C-level</td>
       </tr>
       <tr>
         <td>da Vinci</td>
         <td>Zarlo</td>
         <td>1452.4.15</td>
         <td></td>
+        <td></td>
       </tr>
       <tr>
         <td>Statham</td>
         <td></td>
         <td>1967-7-26</td>
         <td></td>
+        <td>HR</td>
       </tr>
       <tr>
         <td>Micheal</td>
         <td></td>
         <td>1958/8/21</td>
         <td>54</td>
+        <td>Marketing</td>
       </tr>
 
       <tr>
         <td>Ben</td>
         <td></td>
         <td>1994/9/23</td>
         <td>134</td>
+        <td>Marketing</td>
       </tr>
     </table>
   </body>

public/table-sort.js

@@ -57,10 +57,12 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
 
     const tableHead = sortableTable.querySelector("thead");
     const tableHeadHeaders = tableHead.querySelectorAll("th");
-    tableHead.style.cursor = "pointer";
 
     for (let [columnIndex, th] of tableHeadHeaders.entries()) {
-      makeEachColumnSortable(th, columnIndex, tableBody, sortableTable);
+      if (!th.classList.contains("disable-sort")) {
+        th.style.cursor = "pointer";
+        makeEachColumnSortable(th, columnIndex, tableBody, sortableTable);
+      }
     }
   }
 

test/table.test.js

@@ -295,3 +295,18 @@ test("visible-tr-sort: example sort only visible trs", () => {
     )
   ).toStrictEqual(["row5", "row4", "row2"]);
 });
+
+test("disable-sort: disable sorting on a column", () => {
+  expect(
+    createTestTable(
+      [
+        "row2",
+        "row1",
+        "row4",
+        "row3",
+      ],
+      "disable-sort"
+    )
+  ).toStrictEqual(["row2", "row1", "row4", "row3"]);
+});
+