feat(components): add column properties to be sortable DataTable co…

…mponent

  ## what
  - add column properties to be sortable `DataTable` component

  ## how
  - check
    - https://ui.shadcn.com/docs/components/data-table#make-header-cell-sortable

  ## why
  - to have the ability to sort the table as you please

  ## where
  - ./src/app/problems/components/data-table/columns.tsx

  ## usage

src/app/problems/components/data-table/columns.tsx

@@ -1,6 +1,9 @@
 "use client"
 
 import { ColumnDef } from "@tanstack/react-table"
+import { ArrowUpDown, MoreHorizontal } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
 
 // This type is used to define the shape of our data.
 // You can use a Zod schema here if you want.
@@ -12,11 +15,31 @@ export type Payment = {
 export const columns: ColumnDef<Payment>[] = [
   {
     accessorKey: "num",
-    header: "Problem number",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Problem number
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      )
+    },
   },
   {
     accessorKey: "title",
-    header: "Problem title",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Problem Title
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      )
+    },
   },
 ]