🏥 🏭 Working on the COVID-19 response in Canada? Plotly & the Canadian government can help you and your organization. Learn more and get in touch.

dash_table.DataTable Embedded Links

Is there anywhere I can find the css stylesheet for DataTable? I need to create an html table instead of using DataTable because I want to embed links inside of the cells. But I want to the html table to look the same as the DataTable and resize in the same manner.

FWIW, this is now possible with the new markdown presentation option in dash_table.

Your best bet would probably be to use your browser’s “Inspect Element” feature and inspect the CSS styles manually.

1 Like

Ah I didn’t realize markdown presentation was now possible! Has it made it’s way into the DataTable documentation yet?

Not really unfortunately. Here’s an example in the meantime:

data=[
    dict(a=''' ```javascript
return 20;
    ```
'''), # need to dedent the ``` for actual usage
    dict(a='''An image\n
![Plotly](https://aws1.discourse-cdn.com/business7/uploads/plot/original/2X/7/7957b51729ad7fd9472879cd620b9b068d7105bb.png)'''),
    dict(a='''
_italics_\n
**bold**\n
~~strikethrough~~
'''),
    dict(a='''Nested table
Statement | Is it true?
--- | ---
This page has two tables | yes
This table has two rows | no
This is an example of tableception | yes
'''),
    dict(a='[Dash documentation](https://dash.plot.ly)')
]

app.layout = Div([
    DataTable(
        columns=[
            dict(name='a', id='a', type='text', presentation='markdown'),
        ],
        css=[
            dict(selector='img[alt=Plotly]', rule='height: 50px;')
        ],
        data=data
    ),
])

The user interaction is a little awkward, you have to click the link twice to open it (once to select the cell, a second time to press the link). That issue is logged here: https://github.com/plotly/dash-table/issues/710

1 Like

How would I style the markdown? textAlign, fontFamily, fontSize don’t seem to be working inside of style_cell_conditional

Hm good question. What’s the recommendation here @Marc-Andre ?

Hi!

I tried dbc bootstrap table to embed the link, it was working great.

import pandas as pd
import dash_bootstrap_components as dbc

title=['Hi Dash','Hello World']
link=[html.A(html.P('Link'),href="yahoo.com"),html.A(html.P('Link'),href="google.com")]

dictionary={"title":title,"link":link}
df=pd.DataFrame(dictionary)
table=dbc.Table.from_dataframe(df, striped=True, bordered=True, hover=True)

Now this table can be returned to your child element through function calling according to your rules.