Aumentato spazio id + aggiunte freccette ordinamento tabella

resources/views/livewire/course_list.blade.php

@@ -175,12 +175,12 @@
                 <thead>
                     <tr>
                         <th scope="col" class="sticky-col-header first-zero"></th>
-                        <th scope="col" class="sticky-col-header first-col" >Corso</th>
-                        <th scope="col" class="sticky-col-header second-col"><a wire:click="setSort(2)" style="cursor:pointer">Cognome</a></th>
-                        <th scope="col" class="sticky-col-header third-col"><a wire:click="setSort(3)" style="cursor:pointer">Nome</a></th>
-                        <th scope="col"><a wire:click="setSort(4)" style="cursor:pointer">Iscrizione</a></th>
+                        <th scope="col" class="sticky-col-header first-col" ><span>Corso</span></th>
+                        <th scope="col" wire:click="setSort(2)" class="sticky-col-header second-col sorting-col {{$sort == 2 ? "sort-$dir" : ""}}"><span>Cognome</span><span class="dt-column-order"></span></th>
+                        <th scope="col" wire:click="setSort(3)" class="sticky-col-header third-col sorting-col {{$sort == 3 ? "sort-$dir" : ""}}"><span>Nome</span><span class="dt-column-order"></span></th>
+                        <th scope="col" wire:click="setSort(4)" class="sorting-col {{$sort == 5 ? "sort-$dir" : ""}}"><span>Iscrizione</span><span class="dt-column-order"></span></th>
                         @foreach($months as $idx => $m)
-                            <th scope="col"><a wire:click="setSort({{$idx + 5}})" style="cursor:pointer">&nbsp;&nbsp;&nbsp;&nbsp;{{$m}}</a></th>
+                            <th scope="col" wire:click="setSort({{$idx + 5}})" class="sorting-col {{$sort == ($idx + 5) ? "sort-$dir" : ""}}"><span>&nbsp;&nbsp;&nbsp;&nbsp;{{$m}}</span><span class="dt-column-order"></span></th>
                         @endforeach
                     </tr>
                 </thead>
@@ -358,7 +358,43 @@
             padding-left:20px !important;
         }*/
 
+        table.tablesaw thead tr th.sorting-col {
+            position: relative;
+            padding-right: 25px;
+            cursor: pointer;
+        }
 
+        table.tablesaw thead tr th.sorting-col .dt-column-order {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            width: 15px;
+        }
+
+        table.tablesaw thead tr th.sorting-col .dt-column-order:before,
+        table.tablesaw thead tr th.sorting-col .dt-column-order:after {
+            content: "▲" / "";
+            position: absolute;
+            display: block;
+            bottom: 50%;
+            left: 0;
+            opacity: 0.125;
+            line-height: 9px;
+            font-size: 0.8em;
+        }
+        
+        table.tablesaw thead tr th.sorting-col .dt-column-order:after {
+            content: "▼" / "";
+            position: absolute;
+            display: block;
+            top: 50%;
+        }
+
+        table.tablesaw thead tr th.sorting-col.sort-DESC .dt-column-order:before,
+        table.tablesaw thead tr th.sorting-col.sort-ASC .dt-column-order:after {
+            opacity: 0.8;
+        }
     </style>
     <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
@@ -460,9 +496,9 @@
             background-color: white;
         }
         .first-zero {
-            width: 20px;
-            min-width: 20px;
-            max-width: 20px;
+            width: 30px;
+            min-width: 30px;
+            max-width: 30px;
             left: 0px;
             z-index:99;
         }
@@ -566,8 +602,8 @@
             $('.filterDuration').select2({"language": {"noResults": function(){return "Nessun risultato";}}});
             loadDataTable();
             setTimeout(() => {
-                setMaxWidth();
-                setMaxHeight();
+                // setMaxWidth();
+                // setMaxHeight();
             }, 1);
         });
 
@@ -1278,7 +1314,6 @@
         //     //$("div.row.h-100").attr('style', 'height:' + ($(window ).height() + 50) + 'px !important');
         //     $("#resume-table").height( Math.round( $(window ).height() - 220 ) ) ;
         // }
-
     </script>
 @endpush