Action links within DataTable

Dash Python
1

Hi there.

I have a DataTable, with one column as Markdown. In this column -for every row-, I’m adding html links to perform certain actions like Add, modify for information in the row.

Ideally, what I want is to invoke a server callback when the link is clicked, and provide an input to the server of which row, and action clicked.

I can’t use the active_cell prop of the DataTable since there are two actions for each cell (add / history for example).

Here is what I tried so far!

I successfully was able to generate the links html dynamically with whatever attributes I need. I tried to use pattern matching callbacks, and generate the links ids just like in the documentaiton below, but the callbacks never fired even though the ids are correct

https://dash.plotly.com/pattern-matching-callbacks

I was able to attach a javascript function to the onclick even of the links, and it works fine. However, I don’t know how to invoke the server side callback with it. I tried modifying a local Store data, but didn’t invoke.

I created a hidden Div, and modified its content using the Javascript function, but again it didn’t invoke a server callback with the Div’s children prop as Input.

In summary, how can I invoke a server callback from a link in a markdown cell within DataTable?

Any hacks appreciated :slight_smile:

2

Hi @naderelshehabi

I think the solution is to use components in DataTable cells – but unfortunately, that is not yet supported.

If you don’t need all the advanced features of the Dash DataTable, then you could use an HTML table. In the dash-bootstrap-components library there is a Table from Dataframe function that can save some time constructing the table.

3

Hi there Ann,

Thanks for the reply. I actually need DataTable, and have spent quite sometime setting this dashboard up!

A potential solution I’m looking for is either:

  1. A way to attach a call back to an html element using Javascript
  2. A way to call a server callback from Javascript
  3. A way to modify an existing react component’s prop using Javascript to trigger the server callback

What do you think?