added sorting

components/scoreplaylog/colums.tsx

@@ -12,11 +12,10 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Badge } from "@/components/ui/badge";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { generateShareToken } from "@/app/(sharing)/[token]/token";
-
+import { ArrowUpDown, MoreHorizontalIcon } from "lucide-react";
 import { chuni_score_playlog } from "@/prisma/schemas/artemis/generated/artemis";
 import { chuni_static_music } from "@/prisma/schemas/artemis/generated/artemis";
 import { getGrade } from "@/lib/helpers";
@@ -48,7 +47,17 @@ export const columns: ColumnDef<chunithm>[] = [
 
   {
     accessorKey: "score",
-    header: "Score",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Score
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
     cell: ({ row }) => <div>{row.original.score?.toLocaleString()}</div>,
   },
   {
@@ -69,7 +78,17 @@ export const columns: ColumnDef<chunithm>[] = [
   },
   {
     accessorKey: "userPlayDate",
-    header: "Date",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Date
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
   },
   {
     accessorKey: "difficulty",
@@ -94,6 +113,7 @@ export const columns: ColumnDef<chunithm>[] = [
   {
     accessorKey: "Attempts",
     header: "Attempts",
+
     cell: ({ row }) => (
       <div className="font-medium">{row.original.playCount}</div>
     ),

components/scoreplaylog/data-table.tsx

@@ -2,6 +2,8 @@
 import { Button } from "@/components/ui/button";
 import {
   ColumnDef,
+  SortingState,
+  getSortedRowModel,
   flexRender,
   getCoreRowModel,
   getPaginationRowModel,
@@ -16,6 +18,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { useState } from "react";
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
@@ -26,12 +29,18 @@ export function DataTable<TData, TValue>({
   columns,
   data,
 }: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = useState<SortingState>([]);
+
   const table = useReactTable({
     data,
     columns,
-
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+      sorting,
+    },
   });
 
   return (