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?