added table sorter using JavaScript

HTML table sorter using pure JavaScript
sachinsaini4278 · Sep 27, 2022 · c5b353e · c5b353e
1 parent e78beff
commit c5b353e
Show file tree

Hide file tree

Showing 3 changed files with 221 additions and 0 deletions.
diff --git a/sort html table/index.html b/sort html table/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">      
+      <table id="sortTable">
+        <thead>
+          <tr>
+            <th type="string">Name   <i class="fa-solid "></i></th> <!--fa-caret-up active-->
+            <th type="number">Science<i class="fa-solid "></i></th>
+            <th type="number">Maths  <i class="fa-solid "></i></th>
+            <th type="number">Hindi  <i class="fa-solid "></i></th>
+            <th type="number">English<i class="fa-solid "></i></th>
+            <th type="number">Physics<i class="fa-solid "></i></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>David</td>
+            <td>85</td>
+            <td>88</td>
+            <td>87</td>
+            <td>92</td>
+            <td>88</td>
+          </tr>
+          <tr>
+            <td>Ramesh</td>
+            <td>91</td>
+            <td>78</td>
+            <td>71</td>
+            <td>81</td>
+            <td>74</td>
+          </tr>
+          <tr>
+            <td>John</td>
+            <td>81</td>
+            <td>88</td>
+            <td>86</td>
+            <td>84</td>
+            <td>92</td>
+          </tr>
+          <tr>
+            <td>Tony</td>
+            <td>84</td>
+            <td>88</td>
+            <td>86</td>
+            <td>81</td>
+            <td>81</td>
+          </tr>
+          <tr>
+            <td>Harish</td>
+            <td>78</td>
+            <td>79</td>
+            <td>87</td>
+            <td>88</td>
+            <td>89</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/sort html table/script.js b/sort html table/script.js
@@ -0,0 +1,99 @@
+const table = document.getElementById('sortTable');
+const headers = table.querySelectorAll('th');
+const rows = table.querySelectorAll('tr');
+
+headers.forEach((header,headerIndex)=>{
+    header.addEventListener('click',()=>{
+        sortColumn(headerIndex);
+    });
+});
+
+// Transform the content of given cell in given column
+const transform = function (index, content) {
+    // Get the data type of column
+    const type = headers[index].getAttribute('type');
+    switch (type) {
+        case 'number':
+            return parseFloat(content);
+        case 'string':
+        default:
+            return content;
+    }
+};
+
+// Track sort directions
+let directions = Array(headers.length).fill("");
+console.log(directions);
+
+function sortColumn(headerIndex){
+
+    //Check the direction asc or desc
+    const direction = directions[headerIndex] || 'asc';
+    const multiplier = (direction=='asc')? 1 :-1;
+    changeIcon(direction,headerIndex);
+    //lets make new instance of rows
+    let arrayRows = Array.from(rows);      
+    arrayRows.shift();//Exclude header
+
+    let newRows = Array.from(arrayRows);
+    newRows.sort(function(rowA,rowB){
+        //Get the content of cells
+        const cellA = rowA.querySelectorAll('td')[headerIndex].innerHTML;
+        const cellB = rowB.querySelectorAll('td')[headerIndex].innerHTML;
+        let a = transform(headerIndex,cellA);        
+        let b = transform(headerIndex,cellB);        
+
+        if(a>b)
+            return 1*multiplier;
+        else if(a<b)
+            return -1*multiplier;
+        else
+            return 0;
+    });    
+     //Remove old rows
+     let tbody = document.getElementsByTagName("tbody");
+     rows.forEach((row,index)=>{
+        if(index!=0)
+            tbody[0].removeChild(row);
+     });
+     //Append new row
+     newRows.forEach((newRow)=>{
+         tbody[0].appendChild(newRow);
+     });
+
+     // Reverse the direction
+    directions[headerIndex] = direction === 'asc' ? 'desc' : 'asc';
+    // console.log(directions);
+}
+function changeIcon(direction,index)
+{
+    // inactive all icons
+    for(let i=0;i<headers.length;i++){
+        headers[i].childNodes[1].className='';//Removing all classes
+    }
+
+    let className;
+    if(direction=="desc")
+    {
+        //headers[index].childNodes[1].classList.add('fa-solid','fa-caret-down','active');
+        headers[index].childNodes[1].className = ('fa-solid fa-caret-down active');
+    }else{
+        //headers[index].childNodes[1].classList.add('fa-solid','fa-caret-up','active');
+        headers[index].childNodes[1].className = ('fa-solid fa-caret-up active');
+    }    
+}
+// How sort function works:
+// arr = ['3', '1', 4, 1, 5, 9];
+// function compareFun(a,b){
+//  if(a>b) 
+// 	{
+// 	    return 1; //Place a after b
+// 	}
+// 	else if(a<b) 
+// 	{
+// 		return -1;//Place a before b
+// 	}
+// 	else 
+// 		return 0;//Don' change the position keep original order
+// }
+// arr.sort(compareFun);
diff --git a/sort html table/style.css b/sort html table/style.css
@@ -0,0 +1,52 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: sans-serif; /* Change your font family */
+}
+.container {
+  display: flex;
+  justify-content: center;
+}
+
+#sortTable {
+  border-collapse: collapse;
+  margin: 25px 0;
+  font-size: 0.9em;
+  min-width: 400px;
+  border-radius: 5px 5px 0 0;
+  overflow: hidden;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+}
+
+#sortTable thead tr {
+  background-color: #009879;
+  color: #ffffff;
+  text-align: left;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+#sortTable th,
+#sortTable td {
+  padding: 12px 15px;
+}
+
+#sortTable tbody tr {
+  border-bottom: 1px solid #dddddd;
+}
+
+#sortTable tbody tr:nth-of-type(even) {
+  background-color: #f3f3f3;
+}
+
+#sortTable tbody tr:last-of-type {
+  border-bottom: 2px solid #009879;
+}
+th i{
+    margin-left: 1px;
+    visibility: hidden;
+}
+th .active{
+    visibility: visible;    
+}