UXE/tableSortJs.html at master · eVocaTiv/UXE · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      table {
        border-collapse: collapse;
      }
      th,
      td {
        border: 1px solid black;
        padding: 4px;
      }
      th {
        cursor: pointer;
      }
      th:hover {
        background: yellow;
      }
    </style>
  </head>

  <body>
    <table id="grid">
      <thead>
        <tr>
          <th data-type="number">Age</th>
          <th data-type="string">Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>5</td>
          <td>John</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Pete</td>
        </tr>
        <tr>
          <td>12</td>
          <td>Ann</td>
        </tr>
        <tr>
          <td>9</td>
          <td>Eugene</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Ilya</td>
        </tr>
      </tbody>
    </table>

    <script>
      grid.onclick = function (event) {
        // check if target is TH
        let el = event.target;
        if (!el.tagName === "TH") return;

        // if yes, check data type, index & sort
        const dataType = el.dataset.type;
        const index = el.cellIndex;
        // const index =  Array.prototype.indexOf.call(node.parentNode.children, el);
        sort(dataType, index);
      };

      function sort(dataType, index) {

        let tBody = grid.querySelector('tbody');
        let rows = Array.from(tBody.rows);
        let comparator;

        switch(dataType) {
            case 'number':  {
                comparator = (rowA, rowB) => rowA.cells[index].innerHTML - rowB.cells[index].innerHTML;
            }
            break;
            case 'string': {
                comparator = (rowA, rowB) => rowA.cells[index].innerHTML > rowB.cells[index].innerHTML ? 1 : -1;
            }
            break;
        }

        rows.sort(comparator);
        tBody.append(...rows);

      }
    </script>
  </body>
</html>