Datatables

app/resources/views/home.blade.php

@@ -2,10 +2,37 @@
 
 @section('page_content')
     <div class="ui container">
-        <div class="ui list">
-            @foreach ($files as $file)
-                <a class="item" href="{{$urls->base}}/log/{{urlencode($file->getBasename())}}">[{{(new DateTimeImmutable)->setTimestamp($file->getCTime())->format('Y-m-d H:i:s')}}] {{$file->getBasename()}}</a>
+        <table class="ui table" id="logs">
+            <thead>
+            <tr>
+                <th>Date <i class="calendar icon"></i></th>
+                <th>File <i class="file icon"></i></th>
+            </tr>
+            </thead>
+            <tbody>
+            @foreach($files as $file)
+            <tr>
+                <td class="collapsing">
+                    {{(new DateTimeImmutable)->setTimestamp($file->getCTime())->format('Y-m-d H:i:s')}}
+                </td>
+                <td>
+                    <a href="{{$urls->base}}/log/{{urlencode($file->getBasename())}}">
+                        {{$file->getBasename()}}
+                    </a>
+                </td>
+            </tr>
             @endforeach
-        </div>
+            </tbody>
+        </table>
     </div>
 @endsection
+
+@push('page_scripts')
+    <script type="text/javascript">
+        $(document).ready(() => {
+            new DataTable('#logs', {
+                order: [[0, 'desc']]
+            })
+        })
+    </script>
+@endpush