如何在Dash中为DataTable的JobLink列添加支持新标签打开的超链接

要实现DataTable指定列渲染可点击跳转的超链接，只需按以下步骤修改你的代码即可：

第一步：生成带超链接格式的列值 #

将你原来直接给Job Link列赋值链接的逻辑，调整为输出带target="_blank"属性的HTML超链接标签，保证点击后在新标签页打开：

# 原来的代码
# joblink = "http://" + sheet + ".googletest.org:8080/bob/" + df1['Name']
# df1['Job Link'] = joblink

# 修改为
df1['Job Link'] = df1['Name'].apply(
    lambda name: f'<a href="http://{sheet}.googletest.org:8080/bob/{name}" target="_blank" rel="noopener noreferrer">{name}</a>'
)

如果需要单元格显示完整链接，只需要把占位的{name}换成完整链接即可。

第二步：调整列配置，指定Job Link列为Markdown渲染类型 #

修改你原来生成columns列表的逻辑，单独给Job Link列添加渲染格式配置：

# 原来的代码
# columns=[{"name": i, "id": i} for i in df1.columns],

# 修改为
columns=[
    {"name": col, "id": col, "type": "text", "presentation": "markdown"} 
    if col == "Job Link" 
    else {"name": col, "id": col} 
    for col in df1.columns
],

第三步：给DataTable添加Markdown解析配置 #

在dash_table.DataTable的参数中添加markdown_options配置，允许解析HTML内容，否则超链接的新标签打开属性会被过滤：

dash_table.DataTable(
    # 你原来的其他参数保持不变
    markdown_options={"html": True}, # 新增这一行
    # 剩下的原有参数：style_table、style_cell等都不动
)

修改完成后重启服务即可看到Job Link列的内容变成可点击的超链接，点击后会在新标签页打开对应地址。

内容的提问来源于stack exchange，提问作者tester