sorting

components/scoreplaylog/colums.tsx

@@ -59,10 +59,19 @@ export const columns: ColumnDef<chunithm>[] = [
       );
     },
     cell: ({ row }) => <div>{row.original.score?.toLocaleString()}</div>,
+    sortingFn: (a, b) => {
+      const highScore = a.original.score;
+      const lowScore = b.original.score;
+
+      if (highScore < lowScore) return 1;
+      if (highScore > lowScore) return -1;
+
+      return 0;
+    },
   },
   {
     accessorKey: "isNew",
-    header: "Upscore",
+    header: "Up Score",
     cell: ({ row }) => (
       <div>
         {row.original.isNewRecord && <span className="pl-2 ">New!!</span>}
@@ -97,17 +106,34 @@ export const columns: ColumnDef<chunithm>[] = [
   },
   {
     accessorKey: "FC / AJ",
-    header: "FC / AJ",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          FC/AJ
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
     cell: ({ row }) => (
-      <div>
+      <div className="font-medium">
-        <div className="font-medium">
+        {!row.original.isAllJustice && row.original.isFullCombo && (
-          {!row.original.isAllJustice && row.original.isFullCombo && (
+          <span>Full Combo</span>
-            <span>Full Combo</span>
+        )}
-          )}
+        {row.original.isAllJustice && <span>All Justice</span>}
-          {row.original.isAllJustice && <span>All Justice</span>}
-        </div>
       </div>
     ),
+    sortingFn: (a, b) => {
+      const isAllJusticeA = a.original.isAllJustice;
+      const isAllJusticeB = b.original.isAllJustice;
+
+      // Show All Justice entries first
+      if (isAllJusticeA && !isAllJusticeB) return -1;
+      if (!isAllJusticeA && isAllJusticeB) return 1;
+      return 0;
+    },
   },
 
   {