code-boxx · September 18, 2023 11:04 · Jul 23, 2023 · Jul 23, 2023 · Jul 23, 2023 · Jul 22, 2023
diff --git a/0-JS-SORTABLE-TABLE.MD b/0-JS-SORTABLE-TABLE.MD
@@ -1,5 +1,6 @@
 ## JAVASCRIPT SORTABLE TABLE
-https://code-boxx.com/sortable-table-html-javascript/
+* https://code-boxx.com/sortable-table-html-javascript/
+* https://www.youtube.com/watch?v=vQQ9krk5bSA
 
 ## LICENSE
 Copyright by Code Boxx

diff --git a/sortable.js b/sortable.js
@@ -47,7 +47,7 @@ function sortable (instance, data) {
     // (B5) REDRAW TABLE WITH NEW SORT ORDER
     instance.sOrder = [];
     for (let idx in map) { instance.sOrder.push(map[idx].i); }
-    delete(map); instance.draw();
+    instance.draw();
   };
 
   // (C) DRAW HTML TABLE

diff --git a/2-data-object.html b/2-data-object.html
@@ -13,7 +13,7 @@
 
     <!-- (C) INITIALIZE -->
     <script>
-    sorta(document.getElementById("demoB"), {
+    sortable(document.getElementById("demoB"), {
       ID : [44, 11, 7, 5, 2],
       Name : ["John Doe", "Jane Doe", "Aaron Doe", "Zoe Doe", "Derrick Doe"],
       Color : ["Red", "Green", "Blue", "White", "Red"]

diff --git a/1-existing.html b/1-existing.html
@@ -4,11 +4,11 @@
     <title>JS Sortable Table</title>
 
     <!-- (A) JS + CSS -->
-    <link rel="stylesheet" href="sorta.css">
-    <script src="sorta.js"></script>
+    <link rel="stylesheet" href="sortable.css">
+    <script src="sortable.js"></script>
   </head>
   <body>
-    <!-- (B) TABLE : NEEDS PROPER THEAD/TBODY -->
+    <!-- (B) TABLE : NEEDS PROPER THEAD TBODY -->
     <table id="demoA">
       <thead>
         <tr>
@@ -46,7 +46,7 @@
 
     <!-- (C) INITIALIZE -->
     <script>
-    sorta(document.getElementById("demoA"));
+    sortable(document.getElementById("demoA"));
     </script>
   </body>
 </html>
diff --git a/2-data-object.html b/2-data-object.html
@@ -4,8 +4,8 @@
     <title>JS Sortable Table</title>
 
     <!-- (A) JS + CSS -->
-    <link rel="stylesheet" href="sorta.css">
-    <script src="sorta.js"></script>
+    <link rel="stylesheet" href="sortable.css">
+    <script src="sortable.js"></script>
   </head>
   <body>
     <!-- (B) EMPTY TABLE -->

diff --git a/sorta.css → sortable.css b/sorta.css → sortable.css
@@ -1,5 +1,5 @@
 /* CSS IS OPTIONAL - FOR COSMETICS ONLY */
-/* FEEL FREE TO KEEP YOUR OWN STYLES & DISCARD THIS */
+/* FEEL FREE TO CREATE YOUR OWN STYLES & DISCARD THIS */
 
 /* (A) SORTABLE TABLE */
 .sorta { border-collapse: collapse; }
@@ -19,9 +19,7 @@
 .sorta thead *::selection { background: none; }
 
 /* (D) BODY */
-.sorta tbody tr:nth-child(even) {
-  background: #f2f2f2;
-}
+.sorta tbody tr:nth-child(even) { background: #f2f2f2; }
 
 /* (E) UP/DOWN COLORS */
 .sortup { background: #a11010; }

diff --git a/sorta.js → sortable.js b/sorta.js → sortable.js
@@ -1,12 +1,12 @@
 //  instance : target html table
 //  data : optional, generate table with this data
-function sorta (instance, data) {
-  // (A) ATTACH FLAGS TO TABLE
-  instance.sBy = null; // sort by this field
-  instance.sDirection = true; // ascending/descending
-  instance.sOrder = []; // calculated sort order
+function sortable (instance, data) {
+  // (A) FLAGS
+  instance.sBy = null;        // sort by this column
+  instance.sDirection = true; // ascending/descending order
+  instance.sOrder = [];       // calculated sort order
 
-  // (B) ATTACH SORT FUNCTION TO TABLE
+  // (B) SORT FUNCTION
   instance.sort = selected => {
     // (B1) UPDATE SORT FLAGS
     if (instance.sBy == selected.innerHTML) {
@@ -50,7 +50,7 @@ function sorta (instance, data) {
     delete(map); instance.draw();
   };
 
-  // (C) FUNCTION TO REDRAW TABLE DATA
+  // (C) DRAW HTML TABLE
   instance.draw = () => {
     // (C1) REMOVE OLD SORT ORDER
     instance.body.innerHTML = "";
@@ -66,7 +66,7 @@ function sorta (instance, data) {
     }
   };
 
-  // (D) ADAPT EXISTING TABLE TO SORTABLE TABLE
+  // (D) ADAPT DATA FROM EXISTING TABLE
   if (data==undefined) {
     // (D1) GET TABLE SECTIONS
     instance.head = instance.querySelector("thead");
@@ -105,9 +105,10 @@ function sorta (instance, data) {
     instance.draw();
   }
 
-  // (F) ADD CSS CLASS + ATTACH CLICK TO SORT
+  // (F) CLICK ON HEADER CELL TO SORT
   instance.classList.add("sorta");
-  for (let r of instance.head.rows) { for (let c of r.cells) {
+  for (let r of instance.head.rows) {
+  for (let c of r.cells) {
     c.onclick = () => instance.sort(c);
   }}
 }
diff --git a/0-JS-SORTABLE-TABLE.MD b/0-JS-SORTABLE-TABLE.MD
@@ -1,5 +1,5 @@
 ## JAVASCRIPT SORTABLE TABLE
-https://code-boxx.com/sortable-table-vanilla-javascript/
+https://code-boxx.com/sortable-table-html-javascript/
 
 ## LICENSE
 Copyright by Code Boxx

diff --git a/sorta.css b/sorta.css
@@ -24,8 +24,14 @@
 }
 
 /* (E) UP/DOWN COLORS */
-.sortup { background: red; }
-.sortdown { background: blue; }
+.sortup { background: #a11010; }
+.sortdown { background: #2c2cf9; }
+.sortup::before, .sortdown::before { padding-right: 5px; }
+.sortup::before { content: "\21E7"; }
+.sortdown::before { content: "\21E9"; }
 
 /* (X) DOES NOT MATTER */
-* { font-family: Arial, Helvetica, sans-serif; }
+* {
+  font-family: Arial, Helvetica, sans-serif;
+  box-sizing: border-box;
+}
diff --git a/0-JS-SORTABLE-TABLE.MD b/0-JS-SORTABLE-TABLE.MD
@@ -0,0 +1,23 @@
+## JAVASCRIPT SORTABLE TABLE
+https://code-boxx.com/sortable-table-vanilla-javascript/
+
+## LICENSE
+Copyright by Code Boxx
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/1-existing.html b/1-existing.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>JS Sortable Table</title>
+
+    <!-- (A) JS + CSS -->
+    <link rel="stylesheet" href="sorta.css">
+    <script src="sorta.js"></script>
+  </head>
+  <body>
+    <!-- (B) TABLE : NEEDS PROPER THEAD/TBODY -->
+    <table id="demoA">
+      <thead>
+        <tr>
+          <td>Fruit</td>
+          <td>Color</td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Durian</td>
+          <td>Green</td>
+        </tr>
+        <tr>
+          <td>Orange</td>
+          <td>Orange</td>
+        </tr>
+        <tr>
+          <td>Apple</td>
+          <td>Red</td>
+        </tr>
+        <tr>
+          <td>Grape</td>
+          <td>Red</td>
+        </tr>
+        <tr>
+          <td>Blueberry</td>
+          <td>Blue</td>
+        </tr>
+        <tr>
+          <td>Pear</td>
+          <td>Green</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <!-- (C) INITIALIZE -->
+    <script>
+    sorta(document.getElementById("demoA"));
+    </script>
+  </body>
+</html>
diff --git a/2-data-object.html b/2-data-object.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>JS Sortable Table</title>
+
+    <!-- (A) JS + CSS -->
+    <link rel="stylesheet" href="sorta.css">
+    <script src="sorta.js"></script>
+  </head>
+  <body>
+    <!-- (B) EMPTY TABLE -->
+    <table id="demoB"></table>
+
+    <!-- (C) INITIALIZE -->
+    <script>
+    sorta(document.getElementById("demoB"), {
+      ID : [44, 11, 7, 5, 2],
+      Name : ["John Doe", "Jane Doe", "Aaron Doe", "Zoe Doe", "Derrick Doe"],
+      Color : ["Red", "Green", "Blue", "White", "Red"]
+    });
+    </script>
+  </body>
+</html>
diff --git a/sorta.css b/sorta.css
@@ -0,0 +1,31 @@
+/* CSS IS OPTIONAL - FOR COSMETICS ONLY */
+/* FEEL FREE TO KEEP YOUR OWN STYLES & DISCARD THIS */
+
+/* (A) SORTABLE TABLE */
+.sorta { border-collapse: collapse; }
+
+/* (B) CELLS */
+.sorta td, .sorta th {
+  padding: 10px;
+  text-align: left;
+}
+
+/* (C) HEADER */
+.sorta thead {
+  font-weight: 700;
+  color: #fff;
+  background: #000;
+}
+.sorta thead *::selection { background: none; }
+
+/* (D) BODY */
+.sorta tbody tr:nth-child(even) {
+  background: #f2f2f2;
+}
+
+/* (E) UP/DOWN COLORS */
+.sortup { background: red; }
+.sortdown { background: blue; }
+
+/* (X) DOES NOT MATTER */
+* { font-family: Arial, Helvetica, sans-serif; }
diff --git a/sorta.js b/sorta.js
@@ -0,0 +1,113 @@
+//  instance : target html table
+//  data : optional, generate table with this data
+function sorta (instance, data) {
+  // (A) ATTACH FLAGS TO TABLE
+  instance.sBy = null; // sort by this field
+  instance.sDirection = true; // ascending/descending
+  instance.sOrder = []; // calculated sort order
+
+  // (B) ATTACH SORT FUNCTION TO TABLE
+  instance.sort = selected => {
+    // (B1) UPDATE SORT FLAGS
+    if (instance.sBy == selected.innerHTML) {
+      instance.sDirection = !instance.sDirection;
+    } else {
+      instance.sBy = selected.innerHTML;
+      instance.sDirection = true;
+    }
+
+    // (B2) UPDATE CSS OF HEADER CELLS
+    for (let c of instance.head.rows[0].cells) {
+      c.classList.remove("sortup");
+      c.classList.remove("sortdown");
+      if (c == selected) {
+        c.classList.add((instance.sDirection ? "sortup" : "sortdown"));
+      }
+    }
+
+    // (B3) MAP OUT DATA OF THE SELECTED COLUMN
+    // I.E. WE NEED TO RETAIN THE INDEX POSITIONS WHILE SORTING
+    let map = data[selected.innerHTML].map((v, i) => { return { i: i, v: v }; });
+
+    // (B4) SORT ARRAY
+    if (instance.sDirection) {
+      map.sort((a, b) => {
+        if (a.v > b.v) { return 1; }
+        if (a.v < b.v) { return -1; }
+        return 0;
+      });
+    } else {
+      map.sort((a, b) => {
+        if (a.v < b.v) { return 1; }
+        if (a.v > b.v) { return -1; }
+        return 0;
+      });
+    }
+
+    // (B5) REDRAW TABLE WITH NEW SORT ORDER
+    instance.sOrder = [];
+    for (let idx in map) { instance.sOrder.push(map[idx].i); }
+    delete(map); instance.draw();
+  };
+
+  // (C) FUNCTION TO REDRAW TABLE DATA
+  instance.draw = () => {
+    // (C1) REMOVE OLD SORT ORDER
+    instance.body.innerHTML = "";
+
+    // (C2) DRAW NEW SORT ORDER
+    let r, c;
+    for (let i of instance.sOrder) {
+      r = instance.body.insertRow();
+      for (let key in data) {
+        c = r.insertCell();
+        c.innerHTML = data[key][i];
+      }
+    }
+  };
+
+  // (D) ADAPT EXISTING TABLE TO SORTABLE TABLE
+  if (data==undefined) {
+    // (D1) GET TABLE SECTIONS
+    instance.head = instance.querySelector("thead");
+    instance.body = instance.querySelector("tbody");
+
+    // (D2) GET DATA FROM HEADER
+    data = {}; keys = [];
+    for (let c of instance.head.rows[0].cells) {
+      data[c.innerHTML] = [];
+      keys.push(c.innerHTML);
+    }
+
+    // (D3) GET DATA FROM BODY
+    for (let r of instance.body.rows) { for (let i=0; i<r.cells.length; i++) {
+      data[keys[i]].push(r.cells[i].innerHTML);
+    }}
+    delete(keys);
+  }
+
+  // (E) DRAW SORTABLE TABLE FROM OBJECT
+  else {
+    // (E1) CREATE TABLE SECTIONS
+    instance.head = instance.createTHead();
+    instance.body = instance.createTBody();
+
+    // (E2) HEADER CELLS
+    let r = instance.head.insertRow();
+    r = instance.head.rows[0];
+    for (let key in data) {
+      let c = r.insertCell();
+      c.innerHTML = key;
+    }
+
+    // (E3) DEFAULT SORT ORDER & DRAW BODY
+    for (let i=0; i<data[Object.keys(data)[0]].length; i++) { instance.sOrder.push(i); }
+    instance.draw();
+  }
+
+  // (F) ADD CSS CLASS + ATTACH CLICK TO SORT
+  instance.classList.add("sorta");
+  for (let r of instance.head.rows) { for (let c of r.cells) {
+    c.onclick = () => instance.sort(c);
+  }}
+}