diff --git a/frontend/src/components/util.tsx b/frontend/src/components/util.tsx
index 92eeb491b..34636dbdf 100644
--- a/frontend/src/components/util.tsx
+++ b/frontend/src/components/util.tsx
@@ -916,6 +916,23 @@ export const DockerContainersSection = ({
{
accessorKey: "ports.0",
size: 200,
+ sortingFn: (a, b) => {
+ const getMinHostPort = (row: typeof a) => {
+ const ports = row.original.ports ?? [];
+ if (!ports.length) return Number.POSITIVE_INFINITY;
+ const nums = ports
+ .map((p) => p.PublicPort)
+ .filter((p): p is number => typeof p === "number")
+ .map((n) => Number(n));
+ if (!nums.length || nums.some((n) => Number.isNaN(n))) {
+ return Number.POSITIVE_INFINITY;
+ }
+ return Math.min(...nums);
+ };
+ const pa = getMinHostPort(a);
+ const pb = getMinHostPort(b);
+ return pa === pb ? 0 : pa > pb ? 1 : -1;
+ },
header: ({ column }) => (
),
diff --git a/frontend/src/pages/containers.tsx b/frontend/src/pages/containers.tsx
index a71a6dc46..084815197 100644
--- a/frontend/src/pages/containers.tsx
+++ b/frontend/src/pages/containers.tsx
@@ -162,6 +162,23 @@ export default function ContainersPage() {
{
accessorKey: "ports.0",
size: 200,
+ sortingFn: (a, b) => {
+ const getMinHostPort = (row: typeof a) => {
+ const ports = row.original.ports ?? [];
+ if (!ports.length) return Number.POSITIVE_INFINITY;
+ const nums = ports
+ .map((p) => p.PublicPort)
+ .filter((p): p is number => typeof p === "number")
+ .map((n) => Number(n));
+ if (!nums.length || nums.some((n) => Number.isNaN(n))) {
+ return Number.POSITIVE_INFINITY;
+ }
+ return Math.min(...nums);
+ };
+ const pa = getMinHostPort(a);
+ const pb = getMinHostPort(b);
+ return pa === pb ? 0 : pa > pb ? 1 : -1;
+ },
header: ({ column }) => (
),