Fix several issues with Datatables

app/grandchallenge/challenges/static/js/challenges/challenge_costs_overview.mjs

@@ -1,6 +1,9 @@
 document.addEventListener("DOMContentLoaded", event => {
     $("#challengeCostsOverviewTable").DataTable({
-        order: [[2, "desc"]],
+        order: [
+            [2, "desc"],
+            [3, "desc"],
+        ],
         lengthChange: false,
         pageLength: 100,
     });

app/grandchallenge/challenges/views.py

@@ -268,9 +268,6 @@ def get_queryset(self):
             .with_available_compute()
             .with_most_recent_submission_datetime()
             .prefetch_related("phase_set")
-            .order_by(
-                F("most_recent_submission_datetime").desc(nulls_last=True)
-            )
         )
 
 

app/grandchallenge/core/static/css/base.scss

@@ -18,6 +18,7 @@ $pagination-disabled-bg: lighten($blue, 15%) !default;
 @import "../vendored/bootswatch/dist/flatly/variables";
 @import "../vendored/bootstrap/scss/bootstrap";
 @import "../vendored/bootswatch/dist/flatly/bootswatch";
+@import "datatables";
 
 // Fix https://github.com/comic/grand-challenge.org/issues/1201
 .custom-select {

app/grandchallenge/core/static/css/core.css

@@ -242,29 +242,3 @@ a[aria-expanded="false"] .fa-chevron-down {
 .htmx-request.htmx-indicator {
     display: inline-block;
 }
-
-/* datatables */
-.dt-layout-start,
-.dt-layout-end {
-    padding-top: 0.2rem;
-    padding-bottom: 0.2rem;
-}
-
-.dt-container ul.pagination {
-    justify-content: right;
-}
-
-.dt-layout-full,
-.dt-layout-start,
-.dt-layout-end {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-}
-
-.dt-scroll-body {
-    border-bottom: none !important;
-}
-
-.dt-orderable-none .dt-column-order {
-    display: none;
-}

app/grandchallenge/core/static/css/datatables.scss

@@ -0,0 +1,25 @@
+
+.dt-layout-start,
+.dt-layout-end {
+    padding-top: $spacer * 0.5;
+    padding-bottom: $spacer * 0.5;
+}
+
+.dt-container ul.pagination {
+    justify-content: right;
+}
+
+.dt-layout-full,
+.dt-layout-start,
+.dt-layout-end {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
+.dt-scroll-body {
+    border-bottom: none !important;
+}
+
+.dt-orderable-none .dt-column-order {
+    display: none;
+}

app/grandchallenge/core/static/js/datatables.defaults.mjs

@@ -21,6 +21,17 @@ $.extend($.fn.dataTable.defaults, {
             orderable: false,
         },
     ],
+    drawCallback: function () {
+        const api = this.api();
+        api.columns().every(function () {
+            if (this.orderable) {
+                this.header().setAttribute(
+                    "title",
+                    "Activate to sort. Hold Shift to sort by multiple columns.",
+                );
+            }
+        });
+    },
 });
 
 $(document).on("init.dt", () => {