Plotly Dash DataTable 中的可点击超链接

Question

有几个类似的问题我将在此引用，但我有一个 Dash DataTable 与一个列，我想创建一个可点击的超链接。该表基本上如下所示：

Date                        Ticket ID           Work Order           Link (s)
2018-08-30 22:52:25         1444008             119846184            google.com/woNum=119846184
2021-09-29 13:33:49         1724734             122445397, 122441551 google.com/woNum=122445397, google.com/woNum=122441551

没有超链接，我通过 Pandas 数据框和 Dash DataTable 的数据和列引用创建表，如下所示：

# works fine
searchFrame = searchFrame.drop(columns=['ContentNoStop'])
columns = [{'name': col, 'id': col} for col in searchFrame.columns]

链接是通过以下方式创建的：

woLink = r'http://corp.com/uniqueid='

df['WO Link'] = df['Work Order'].str.replace('(\d+)', rf'{woLink}\1')

crLink = r'http://corp.com/uniqueid='
        
df['Ticket Link'] = crLink + df['Ticket ID'].astype(str)

现在，在 Plotly 论坛的 this question 之后，我进行了编辑以适合我的情况：

columns = [
        {'name': col, 'id': col} 
for col in searchFrame.loc[
                :,
                [
                'Reported Date', 'Site','Ticket ID', 'Ticket Link', 'Work Order',\
                'Score', 'Level', 'First', 'Last', 'Department',  \
                'Detection', 'Code', 'Content', 'Description', 'Owner', 'Owner Group', 'Document ID'
                ], { "name": "WO Link", "id": "WO Link", 'type': 'text', "presentation" :'markdown' }
            ],
        ]

直接复制该代码会引发Syntax Error: Invalid Syntax。所以，我编辑为：

columns = [
        {'name': col, 'id': col} 
for col in searchFrame.loc[
                :,
                [
                'Reported Date', 'Site','Ticket ID', 'Ticket Link', 'Work Order',\
                'Score', 'Level', 'First', 'Last', 'Department',  \
                'Detection', 'Code', 'Content', 'Description', 'Owner', 'Owner Group', 'Document ID'
                ], { "name": "WO Link", "id": "WO Link", 'type': 'text', "presentation" :'markdown' }
            ]]

但是，这会引发 raise IndexingError("Too many indexers") pandas.core.indexing.IndexingError: Too many indexers

使用this SO question，我做了以下也抛出了Too many indexers。我也尝试过的那个问题的另一个答案（如下）抛出了TypeError: unhashable type: 'slice'

idx = pd.IndexSlice
columns = [
                {'name': col, 'id': col} 
for col in searchFrame.loc[idx[
                :,
                [
                'Reported Date', 'Site','Ticket ID', 'Ticket Link', 'Work Order',\
                'Score', 'Level', 'First', 'Last', 'Department',  \
                'Detection', 'Code', 'Content', 'Description', 'Owner', 'Owner Group', 'Document ID'
                ], { "name": "WO Link", "id": "WO Link", 'type': 'text', "presentation" :'markdown' }
            ], :]
        ]

columns = [
        {'name': col, 'id': col} 
for col in searchFrame.loc(axis=0)[
                :,
                [
                'Reported Date', 'Site','Ticket ID', 'Ticket Link', 'Work Order',\
                'Score', 'Level', 'First', 'Last', 'Department',  \
                'Detection', 'Code', 'Content', 'Description', 'Owner', 'Owner Group', 'Document ID'
                ], { "name": "WO Link", "id": "WO Link", 'type': 'text', "presentation" :'markdown' }
            ]]

我在这里做错了什么？我觉得为这些创建链接应该不会太复杂。此外，如果您可以在某些行中容纳多个链接，您将是我永远的英雄。

Answer 1

如果您确保链接在 Markdown format 中，Plotly Dash community forum 中建议的解决方案应该可以工作：

import dash
import dash_html_components as html
import dash_table
import pandas as pd

df = pd.DataFrame({
    'Date': ['2018-08-30 22:52:25', '2021-09-29 13:33:49'],
    'Ticket ID': [1444008, 1724734],
    'Work Order': ['119846184', '122445397'],
    'Link(s)': ['[Google](https://www.google.com)', '[Twitter](https://www.twitter.com), [Facebook](https://www.facebook.com)'],
})

app = dash.Dash()

app.layout = html.Div(children=[

    dash_table.DataTable(
        data=df.to_dict(orient='records'),
        columns=[{'id': x, 'name': x, 'presentation': 'markdown'} if x == 'Link(s)' else {'id': x, 'name': x} for x in df.columns],
        style_table={'position': 'relative', 'top': '5vh', 'left': '5vw', 'width': '60vw'}
    ),

])

if __name__ == '__main__':
    app.run_server(host='127.0.0.1', debug=True)