Can I use a hyperlink in a callback-generated DataTable to open a modal using passed data?

Dash Python
1

I create records in a DataTable using a dbc.Modal and a Submit button linked to a callback that invokes a POST request (there’s 8 fields, showing only 2 for brevity):

html.Div([
    dbc.Modal([
        html.Tr([html.Td('Author(s):', id='country-source-author-label'),
        html.Td(dcc.Textarea(id='country-source-author-textarea')
        ]),
        html.Tr([html.Td('Publication Date:',
        html.Td(dcc.DatePickerSingle(id='country-source-publication-date-picked')])
    ], id='add-country-source-modal'),
    dbc.Button("Submit", id='add-country-source-submit-button'))
])

Here’s sample data generated by this form: county_source_table = ['author_name': 'E.O. Wilson', 'date': '2021-10-31', 'link': '#']

To view Sources, I have a DataTable with a hyperlink to an individual record in a Details column.

sources_table = dash_table.DataTable(
    id='county-source-table',
    columns=[
        {'id': 'author_name', 'name': 'Author'},
        {'id': 'date', 'name': 'Publication Date'},
        {'id': 'link', 'name': 'Details', 'type': 'text', 'presentation': 'markdown'}
    ], 
    markdown_options={'link_target': '_self'})

What I’d like to do is click on the link for each record in the table to open up the Dash Bootstrap modal with all the relevant data for that record - something like this. I’m stumped - any ideas?

2

Hi,

I believe you can use the approach described in this other post. It should be straightforward to write a callback to update and show the dbc.Modal.

1 Like