Link alignment in the Dash DataTable

Dash Python
1

Hello!

I’m making a table that should contain clickable links. I make links in this format [Link](link.com) and clickability is added through 'presentation': 'markdown'.
Code:

style_for_link = [{'id': x, 'name': x, 'presentation': 'markdown'} if (x == 'Link')
                  else {'id': x, 'name': x} for x in ['№', 'Date Requested', 'Operation', 'Link', 'Status', 'Time From Request']]
style_for_names = {'color':'#0b5aff'}


def check_df(dataframe):
    if dataframe.empty:
        return "No tasks"
    else:
        return dash_table.DataTable(dataframe.to_dict('records'),
                                    style_cell={'text-align': 'center', 'margin-bottom':'0'},
                                    columns=style_for_link
                                    )

But as a result, I get a link in the upper left corner of the cell, although I set the alignment of the cells.

image
image1105×79 8.38 KB

Can you please tell me how to make a link in the center in the height and width of the cell?

2

hi @giga
:wave: welcome to the Dash Community.

Here’s a good post with info on the styling markdown in DataTable.

3

Thank you. The only working solution there is dbc.Table, but I need a Dash DataTable. You don’t know how to do it?

4

I see, so this post and code didn’t work? Have you tried adding the css file?

There is no “official” API to override the Markdown styles inside the DataTable. You can either include a css file in the app’s /assets folder or use the table’s css .

5

Minimal working code:

from dash import Dash, html, dash_table
import dash_bootstrap_components as dbc
from flask import Flask
import pandas as pd

data = [["1", "2022-09-28", "st", "[Link](google.com)", "status", "20"]]
col = ['№', 'Date Requested', 'Operation', 'Link', 'Status', 'Time From Request']
df = pd.DataFrame(data, columns=col)

server = Flask(__name__)
app = Dash(__name__, server=server, suppress_callback_exceptions=True, external_stylesheets=[dbc.themes.BOOTSTRAP])

style_for_link = [{'id': x, 'name': x, 'type': 'text', 'presentation': 'markdown'} if (x == 'Link')
                  else {'id': x, 'name': x} for x in ['№', 'Date Requested', 'Operation', 'Link', 'Status', 'Time From Request']]
style_for_names = {'color': '#0b5aff'}


app.layout = html.Div([
    dash_table.DataTable(df.to_dict('records'),
                         style_cell={'text-align': 'center', 'margin-bottom': '0'},
                         columns=style_for_link,
                         )
    ])

if __name__ == '__main__':
    server.run(port=5000, debug=True)

In browser DevTools I found the place where the left alignment is formed. As I understand it, vertical alignment can also be added there.
Screen Shot 2022-09-28 at 13.40.14

As in the post you sent, I will add a parameter
css=[dict(selector='.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th div.dash-cell-value.cell-markdown', rule='text-align: center;')] in dash_table.DataTable(), but it doesn’t help.

Also, I created css a file in a project folder assets:

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th div.dash-cell-value.cell-markdown {
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

But that doesn’t help either.

6

Hi @giga

I ran your example and got the same results. Could you try running this one? The links look right to me. I haven’t figured out what the difference is, but maybe this could be a starting point.


from dash import Dash, dash_table
import pandas as pd

data = dict(
    [
        ("Date", ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"]),
        ("Region", [
            "[Montreal](https://en.wikipedia.org/wiki/Montreal)",
            "[Toronto](https://en.wikipedia.org/wiki/Toronto)",
            "[New York City](https://en.wikipedia.org/wiki/New_York)",
            "[Miami](https://en.wikipedia.org/wiki/Miami)",
            "[San Francisco](https://en.wikipedia.org/wiki/San_Francisco)",
            "[London](https://en.wikipedia.org/wiki/London)",
        ]),
        ("Temperature", [1, -20, 3.512, 4, 10423, -441.2]),
        ("Humidity", [10, 20, 30, 40, 50, 60]),
        ("Pressure", [2, 10924, 3912, -10, 3591.2, 15]),
    ]
)

df = pd.DataFrame(data)

app = Dash(__name__)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c,  'presentation': 'markdown'} for c in df.columns],
    css=[{"selector": "p", "rule": "margin: 0"}],
)

if __name__ == '__main__':
    app.run_server(debug=True)
``
2 Likes
7

Thanks a lot, it helped! I added
css=[dict(selector= "p", rule= "margin: 0; text-align: center")]
and the link became in the center of the cell in height and width.

2 Likes