I am using a Data Table from Shadcn in a React project with Typescript. I wanted to an Actions menu with a Dropdown list as listed in the example.
"use client";import { ColumnDef } from "@tanstack/react-table";import { MoreHorizontal } from "lucide-react";import { dataRowRow } from "../../common/Types";import { Button } from "../ui/button";import "./Columns.css";import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger,} from "../ui/dropdown-menu";export const columns: ColumnDef<dataRowRow>[] = [ { accessorKey: "locationName", header: "Location", }, { accessorKey: "status", header: "Status", }, { id: "actions", header: "Actions", cell: ({ row }) => { const dataRow = 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={() => console.log(dataRow)}> Edit dataRow</DropdownMenuItem><DropdownMenuItem>Delete dataRow</DropdownMenuItem><DropdownMenuItem>Generate URL</DropdownMenuItem><DropdownMenuSeparator /><DropdownMenuItem onClick={() => navigator.clipboard.writeText(dataRow.url) }> Copy upload URL</DropdownMenuItem></DropdownMenuContent></DropdownMenu> ); }, },];
The copy to clipboard function works without a hitch. However, how could I send another function as a parameter to the component to manage for example the deletion of a row?
Like saving the row in a state and opening a modal that manages the API call for example?