如何在 Dash table 中呈现超链接？ (数据Table 或 dbc Table)

Question

我目前正在将 Dash frontend interface (python), where I'm loading data from a Pandas dataframe 转换为 table。

我的问题是：如何在 table 中呈现超链接？ 我对 Dash 的 DataTable component, but also with dbc Table（Dash Bootstrap 组件），我在我的实现中使用。

您可以在下面找到我如何将数据框加载到 dbc Table 组件中的简化和总结代码。基本上，当用户单击搜索按钮时，State 中的查询用作 POST 请求的参数。响应 JSON 已映射，在这里我尝试呈现超链接 - 到目前为止没有成功。

import dash_bootstrap_components as dbc
import pandas as pd
from dash import html, Input, Output, State
from app import app, backend_api


layout = html.Div(
    dbc.Button("Search", id='search-button'),
    dbc.Table(id="table"),
)


@app.callback(
    Output(component_id='table', component_property='children'),
    Input(component_id='search-button', component_property='n_clicks'),
    State(component_id='query', component_property='value'),
    State('session', 'data'),
)
def search(n_clicks, query, session):
    if not is_token_valid(token):
        return None
    response_json = backend_api.post_json_secure("/api/search/search/", token=token, payload=query)
    json_mapped = map_json(response_json)
    data = pd.json_normalize(json_mapped)
    table = dbc.Table.from_dataframe(data, striped=False, bordered=False, hover=False)
    return table


def map_json(json):
    # misc processing and try to render hyperlink
    mapped = ({
        "Column A": item["value_a"],
        "Column B": item["value_b"],
        "Column C": item["value_c"],
        "Link": create_link(item["link"]),
    } for item in json)
    return mapped


def create_link(url):
    # url is for example https://www.google.com
    # return url  # doesn't work
    # return f'<a href="{url}"/>  # doesn't work either
    # how do I create a hyperlink here?

这是目前的结果 - 如您所见，Link 列中只有文本 - 我宁愿在此处使用真正的超链接。

Answer 1

使用 dbc Table 的解决方案（Dash Bootstrap 组件）

def create_link(url):
    return html.A(html.P('Link'), href=url)
    # alternatively use dcc.Link instead of html.A to prevent page refresh

使用 Dash 的数据Table 组件

的解决方案

这里必须在列配置中使用"presentation": "markdown"：

# example with only one column and row
data_table = dash_table.DataTable(
    id="table",
    columns=[{"name": "link", "id": "column_link", "presentation": "markdown"}],
    data=[{"html": '<a href="https://www.google.com">Link</a>'}], 
    markdown_options={"html": True},
)

如何在 Dash table 中呈现超链接？ (数据Table 或 dbc Table)

How do I render a hyperlink in a Dash table? (DataTable or dbc Table)

python

html-table

hyperlink

plotly-dash

dash-bootstrap-components

使用 dbc Table 的解决方案（Dash Bootstrap 组件）

使用 Dash 的数据Table 组件

结果：