export const columns: ColumnDef<VolunteerBaseWithId>[] = [
  {
    id: "actions",
    cell: ({ row }) => {
      const volunteer = row.original
      return (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="h-8 w-8 p-0">
              <span className="sr-only">Open menu</span>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuLabel>Actions</DropdownMenuLabel>
              <VolunteerProfilePopup volunteerId={volunteer.void}>
                <DropdownMenuItem>
                  View Volunteer
                </DropdownMenuItem>
              </VolunteerProfilePopup>
          </DropdownMenuContent>
        </DropdownMenu>
      )
    },
]
//USAGE:
<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 (
    <Dialog>
      <DialogTrigger asChild>
        {trigger}
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>{volunteer?.fn} {volunteer?.ln}</DialogTitle>
          <DialogDescription>
            Volunteer Profile
          </DialogDescription>
        </DialogHeader>
        {isLoading ? (
          <Loader />
        ) : (
          <div>
            <p><strong>First Name:</strong> {volunteer?.fn}</p>
            <p><strong>Last Name:</strong> {volunteer?.ln}</p>
            <p><strong>Phone Number:</strong> {volunteer?.phn}</p>
          </div>
        )}
      </DialogContent>
    </Dialog>
  )
};