Markdown inside DataTable is adding paragraph around it

Dash Python
1

When markdown is used in DashTable, an additional <p> tag is added making the cell and intern all rows larger.

import dash
from dash import dash_table
app = dash.Dash()
app.layout = dash_table.DataTable(
    [
        {'Col1': 1, 'Col2': 2, 'Col3': 'Text3'},
        {'Col1': 4, 'Col2': 5, 'Col3': 'Text6'}
    ],
    [
        {'name': 'Col1', 'id': 'Col1'},
        {'name': 'Col2', 'id': 'Col2'},
        {'name': 'Col3', 'id': 'Col3', 'presentation':'markdown'},
    ]
)

app.run_server(host='localhost', port=5050)

image
image952×241 12.8 KB

Is there a way to control this from markdown_options?

1 Like
2

Hi @krishvk and welcome to the Dash community :slight_smile:

You can remove the margin from the p element with css - here is an example:

import dash
from dash import dash_table

app = dash.Dash(__name__)
app.layout = dash_table.DataTable(
    [{"Col1": 1, "Col2": 2, "Col3": "Text3"}, {"Col1": 4, "Col2": 5, "Col3": "Text6"}],
    [
        {"name": "Col1", "id": "Col1"},
        {"name": "Col2", "id": "Col2"},
        {"name": "Col3", "id": "Col3", "presentation": "markdown"},
    ],
    css=[{"selector": "p", "rule": "margin: 0"}],
)


if __name__ == "__main__":
    app.run_server(debug=True)

image

3 Likes