Quantcast
Channel: Recent Questions - Stack Overflow
Viewing all articles
Browse latest Browse all 12111

Sending functions as props to Shadcn UI Table

$
0
0

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?


Viewing all articles
Browse latest Browse all 12111

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>