Maintaining formatting with markdown in Datatable

Dash Python
1

Hello all~

I have been using markdown in my datatable, and have had issue applying styling that doesn’t seem to get passed to the cells with markdown. In particular, I am just seeking to center the text. This works fine for all non-markdown cells, and I’ve seen this has been raised previously without a clear path forward below:

Attaching an image of the styling not applying to the markdown link in the left-most column

dash
dash1826×752 69.1 KB

Here is the code I am using to generate the table, with center align applied everywhere (to data, header, and cell)

    return dash_table.DataTable(
        id='datatable',
        columns=[
            {"name": "Ticker", "id": "ticker", 'type': 'text', 'presentation': 'markdown'},
            {"name": "Initial Date Est.", "id": "date"},
            {"name": "Watchlist(s)", "id": "grouping", "editable": True},
            {"name": "Notes", "id": "notes", "editable": True},
            {"name": "Latest Price ($)", "id": "price", 'type': 'numeric', 'format': FormatTemplate.money(2)},
            {"name": "Change (30d)", "id": "change", 'type': 'numeric', 'format': FormatTemplate.percentage(2).sign(Sign.positive)},
            {"name": "Market Cap ($)", "id": "market_cap"},
            {"name": "Price Chart", "id": "chart",
                'type': 'text', 'presentation': 'markdown'},
        ],
        data=watchlist_dict,
        css=[{'selector': '.row', 'rule': 'margin: 0'}],
        filter_action="native",
        sort_action="native",
        style_as_list_view=True,
        style_cell={
            'fontSize': 17,
            'padding': '10px',
            'textAlign': 'center'
        },
        style_header={
            'font-family': 'arial',
            'fontSize': 15,
            'fontWeight': 'bold',
            'textAlign': 'center'
        },
        style_data={
            'textAlign': 'center',
            'fontWeight': 'bold',
            'font-family': 'Roboto',
            'fontSize': 15,
        },
        # scrollable for small viewports
        style_table={
            'overflowX': 'auto',
        },
        sort_mode="single",
        column_selectable="single",
        row_deletable=True,
        selected_columns=[],
        selected_rows=[],
        page_action="native",
        page_current=0,
        page_size=100,
    )

Any help would be greatly appreciated!

Thanks in advance,
-Daniel

1 Like
2

Hi @danielhhowell

There is good info in this post: dash_table.DataTable Embedded Links - #8 by Marc-Andre

3

Hi @AnnMarieW, thanks for the quick reply.

I tried every approach in that thread, both alone and in combination. Including the stylesheet css:

p {
  margin-top: 0;
}

#datatable td table {
  text-align: center;
  margin: auto;
}

.datatable td table {
  text-align: center;
  margin: auto;
}

and the datatable css

        css=[
            dict(selector='datatable', rule='text-align: center;'),
            dict(selector='datatable table', rule='text-align: center;'),
            dict(selector='td table', rule='text-align: center;'),
            dict(selector='td table tr > *', rule='text-align: center;'),

        ],

to no avail :pensive:

4

Try putting this in your assets folder (it worked for me):

p {
   margin-bottom: 0;
   text-align : center;
}

If that doesn’t work, could you share a minimal working example that shows the problem?

2 Likes
5

This worked perfectly! Thanks so much for the rapid assistance!