Search code examples
pythondatatableplotly-dash

How to align a markdown cell with a link in dash DataTable?

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

My 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)

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 with my result:

enter image description here

In browser DevTools I found the place where the left alignment is formed. As I understand it, vertical alignment can also be added there. DevTools screenshot. I try to change styles for markdown, by saving them in a css file and adding the file to the /assets folder. But it doesn't solve the problem.

Css file:

 .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;
}

Also, 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.

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

Solution

Adding a css parameter helped. The working code looks like this:

dash_table.DataTable(dataframe.to_dict('records'),
                                    style_cell={'text-align': 'center', 'margin-bottom':'0'},
                                    columns=style_for_link,
                                    style_cell_conditional=style_columns_width,
                                    fill_width=False,
                                    css=[dict(selector= "p", rule= "margin: 0; text-align: center")]
                                    )
Solution

  • Adding a css parameter helped. The working code looks like this:

    dash_table.DataTable(dataframe.to_dict('records'),
                                    style_cell={'text-align': 'center', 'margin-bottom':'0'},
                                    columns=style_for_link,
                                    style_cell_conditional=style_columns_width,
                                    fill_width=False,
                                    css=[dict(selector= "p", rule= "margin: 0; text-align: center")]
                                    )