Fix table sorting function to not sort based on date time string (#37)

Currently the table date time columns sorted based on their date time
string representations. This pr fixes this, along with disabling
multiple sortings at once, since this behavior was confusing users.

Author: ben-fornefeld

src/features/dashboard/sandboxes/table-config.tsx

@@ -317,12 +317,18 @@ export const COLUMNS: ColumnDef<Sandbox>[] = [
   },
   {
     id: 'startedAt',
-    accessorFn: (row) => new Date(row.startedAt).toUTCString(),
+    accessorKey: 'startedAt',
     header: 'Started At',
     cell: ({ row, getValue }) => {
-      const dateTimeString = getValue() as string
-      // Split the date and time parts
-      const [day, date, month, year, time, timezone] = dateTimeString.split(' ')
+      const dateValue = getValue() as string;
+
+      const dateTimeString = useMemo(() => {
+        return new Date(dateValue).toUTCString();
+      }, [dateValue]);
+
+      const [day, date, month, year, time, timezone] = useMemo(() => {
+        return dateTimeString.split(' ');
+      }, [dateTimeString]);
 
       return (
         <div className={cn('h-full truncate font-mono text-xs')}>
@@ -337,5 +343,8 @@ export const COLUMNS: ColumnDef<Sandbox>[] = [
     // @ts-expect-error dateRange is not a valid filterFn
     filterFn: 'dateRange',
     enableColumnFilter: true,
+    sortingFn: (rowA, rowB) => {
+      return rowA.original.startedAt.localeCompare(rowB.original.startedAt);
+    },
   },
 ]

src/features/dashboard/sandboxes/table.tsx

@@ -171,7 +171,7 @@ export default function SandboxesTable({
     getFilteredRowModel: getFilteredRowModel(),
     getSortedRowModel: getSortedRowModel(),
     enableSorting: true,
-    enableMultiSort: true,
+    enableMultiSort: false,
     columnResizeMode: 'onChange' as const,
     enableColumnResizing: true,
     keepPinnedRows: true,

src/features/dashboard/templates/table-config.tsx

@@ -294,30 +294,64 @@ export const useColumns = (deps: unknown[]) => {
         filterFn: 'equals',
       },
       {
-        accessorFn: (row) => new Date(row.createdAt).toUTCString(),
+        accessorKey: 'createdAt',
         enableGlobalFilter: true,
         id: 'createdAt',
         header: 'Created At',
         size: 250,
         minSize: 140,
-        cell: ({ getValue }) => (
-          <div className="text-fg-500 truncate font-mono text-xs">
-            {getValue() as string}
-          </div>
-        ),
+        cell: ({ row, getValue }) => {
+          const dateValue = getValue() as string;
+
+          const dateTimeString = useMemo(() => {
+            return new Date(dateValue).toUTCString();
+          }, [dateValue]);
+
+          const [day, date, month, year, time, timezone] = useMemo(() => {
+            return dateTimeString.split(' ');
+          }, [dateTimeString]);
+
+          return (
+            <div className={cn('h-full truncate font-mono text-xs')}>
+              <span className="text-fg-500">{`${day} ${date} ${month} ${year}`}</span>{' '}
+              <span className="text-fg">{time}</span>{' '}
+              <span className="text-fg-500">{timezone}</span>
+            </div>
+          )
+        },
+        sortingFn: (rowA, rowB) => {
+          return rowA.original.createdAt.localeCompare(rowB.original.createdAt);
+        },
       },
       {
-        accessorFn: (row) => new Date(row.updatedAt).toUTCString(),
+        accessorKey: 'updatedAt',
         id: 'updatedAt',
         header: 'Updated At',
         size: 250,
         minSize: 140,
         enableGlobalFilter: true,
-        cell: ({ getValue }) => (
-          <div className="text-fg-500 truncate font-mono text-xs">
-            {getValue() as string}
-          </div>
-        ),
+        cell: ({ row, getValue }) => {
+          const dateValue = getValue() as string;
+
+          const dateTimeString = useMemo(() => {
+            return new Date(dateValue).toUTCString();
+          }, [dateValue]);
+
+          const [day, date, month, year, time, timezone] = useMemo(() => {
+            return dateTimeString.split(' ');
+          }, [dateTimeString]);
+
+          return (
+            <div className={cn('h-full truncate font-mono text-xs')}>
+              <span className="text-fg-500">{`${day} ${date} ${month} ${year}`}</span>{' '}
+              <span className="text-fg">{time}</span>{' '}
+              <span className="text-fg-500">{timezone}</span>
+            </div>
+          )
+        },
+        sortingFn: (rowA, rowB) => {
+          return rowA.original.updatedAt.localeCompare(rowB.original.updatedAt);
+        },
       },
       {
         accessorKey: 'public',
@@ -351,7 +385,7 @@ export const templatesTableConfig: Partial<
   getFilteredRowModel: getFilteredRowModel(),
   getSortedRowModel: getSortedRowModel(),
   enableSorting: true,
-  enableMultiSort: true,
+  enableMultiSort: false,
   columnResizeMode: 'onChange',
   enableColumnResizing: true,
   enableGlobalFilter: true,