Suitable Way of Displaying Toast from Data Table Row Action about taxonomy

[jadejamig]

Solved this by creating a separate cell action component:

const CellAction = ({ row }: CellContext<File, unknown>) => {
  const file = row.original;
  const { toast } = useToast();
  const router = useRouter();

  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">
        <DropdownMenuItem 
          className='text-red-600 focus:text-red-700 bg-red-100/50'
          onClick={ async () => {
            const { success } = await deleteFileById(file.key)
                  
                  if (!success) {
                    toast({
                      duration: 4000,
                      variant: "default",
                      description: `💥 Something went wrong, couldn't delete the file!`
                    })
                    return
                  }

                  toast({
                    duration: 4000,
                    variant: "success",
                    description: `🗑 Deleted successfully!`
                  })

                  router.refresh();
          }}
        >
            <Trash className="mr-2 h-4 w-4" />
            <span>Delete file</span>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

And passing it in the column definition:

export const columns: ColumnDef<File>[] = [
  {
   ...
  },
  {
    id: "actions",
    cell: CellAction,
  }
]