Next.js Discord

Discord Forum

How to do modal in Shadcn table columns

Brown bear posted this in #help-forum
Open in Discord
Brown bearOP
export const columns: ColumnDef<VolunteerBaseWithId>[] = [
    id: "actions",
    cell: ({ row }) => {
      const volunteer = row.original
      return (
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="h-8 w-8 p-0">
              <span className="sr-only">Open menu</span>
          <DropdownMenuContent align="end">
              <VolunteerProfilePopup volunteerId={volunteer.void}>
                  View Volunteer
<VolunteerDataTable columns={columns} data={volunteerData} /> 

How can you use modals on the shadcn tables? For some reason the popups dont work with this method
export function VolunteerProfilePopup({ volunteerId, trigger }: VolunteerProfilePopupProps) { 
  //fetching data to display
  return (
      <DialogTrigger asChild>
      <DialogContent className="sm:max-w-[425px]">
          <DialogTitle>{volunteer?.fn} {volunteer?.ln}</DialogTitle>
            Volunteer Profile
        {isLoading ? (
          <Loader />
        ) : (
            <p><strong>First Name:</strong> {volunteer?.fn}</p>
            <p><strong>Last Name:</strong> {volunteer?.ln}</p>
            <p><strong>Phone Number:</strong> {volunteer?.phn}</p>

0 Replies