adding pagination.

src/features/backup/columns.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import {ColumnDef} from "@tanstack/react-table"
+import {StatusBadge} from "@/components/wrappers/status-badge";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel, DropdownMenuSeparator,
+    DropdownMenuTrigger
+} from "@/components/ui/dropdown-menu";
+import {Button} from "@/components/ui/button";
+import {MoreHorizontal} from "lucide-react";
+
+export type Backup = {
+    id: string
+    createdAt: string
+    status: "pending" | "processing" | "success" | "failed"
+}
+
+export const columns: ColumnDef<Backup>[] = [
+    {
+        accessorKey: "id",
+        header: "Reference",
+    },
+    {
+        accessorKey: "createdAt",
+        header: "Created At",
+    },
+    {
+        accessorKey: "status",
+        header: "Status",
+        cell: ({row}) => {
+            return <StatusBadge status={row.getValue("status")}/>
+        },
+    },
+    {
+        id: "actions",
+        cell: ({row}) => {
+            const payment = row.original
+
+            return (
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" className="h-8 w-8 p-0">
+                            <span className="sr-only">Open menu</span>
+                            <MoreHorizontal className="h-4 w-4"/>
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                        <DropdownMenuItem
+                            onClick={() => navigator.clipboard.writeText(payment.id)}
+                        >
+                            Copy payment ID
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator/>
+                        <DropdownMenuItem>View customer</DropdownMenuItem>
+                        <DropdownMenuItem>View payment details</DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            )
+        },
+    },
+]