Tables in Markdown

Dash Python
1

Does dash_core_components.Markdown support tables?

I can’t get it to render properly:

import dash_core_components as dcc
dcc.Markdown(
'''
header 1 | header 2 
--- | ---
cell 11 | cell 21
cell 21 | cell 22
'''
)

Renders as:

header 1 | header 2 — | — cell 11 | cell 21 cell 21 | cell 22

2

That’s strange. The Markdown component uses react-markdown. If I try your table in https://rexxars.github.io/react-markdown/ , it works.

3

Yeah, that’s really weird. Unfortunately I haven’t put in the time to understand how Dash integrates the React components, instead just blindly using the pre-build Dash components. Maybe this should be the impetus for me to figure it out and diagnose…

4

After doing some digging, it doesn’t to do anything but pass children to react-markdown. I can’t figure out why it behaves differently from https://rexxars.github.io/react-markdown/. It also won’t render raw HTML properly like it is supposed to.

5

I think the answer is Table Support was added in 3.0: https://github.com/rexxars/react-markdown/blob/master/CHANGELOG.md#300---2017-11-20

But looking at the Dash Core Components package file it’s fixed to no major version increase from React Markdown 2.4.5, which the latest of would be 2.5.1: dash-core-components/package.json at master · plotly/dash-core-components · GitHub

6

That looks like it. Maybe I’ll add in issue to update it.

7

Any news on this issue?

8

Yes, tables are supported in dcc.Markdown and in the tooltips which use the markdown sytnax.

There is a nice example “Tables in Tooltips” on this page: DataTable Tooltips | Dash for Python Documentation | Plotly

Note for Boostrap users:

In Boostrap, the tables are un-styled by default. The example I mentioned from the Dash docs will look like this if you are using the Bootstrap stylesheet:
image

To format the table so it looks like the example in the Dash docs, add the css shown below to the css file in the assets folder

image

Add this to the css in the assets folder:

/*  when using Bootstrap, this will add row borders to the table in dcc.Markdown
 *   Table
–––––––––––––––––––––––––––––––––––––––––––––––––– */
table {
  border-collapse: collapse;
}
th:not(.CalendarDay),
td:not(.CalendarDay) {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child:not(.CalendarDay),
td:first-child:not(.CalendarDay) {
  padding-left: 0; }
th:last-child:not(.CalendarDay),
td:last-child:not(.CalendarDay) {
  padding-right: 0; }
1 Like
9

Thank you, this worked for me!

1 Like
10

Hi,

I’m having the same problem in 2021. I’m trying to dynamically build a markdown document (a report) with incrustated tables. I’ve been able to do so by using dangerously_allow_html=True in the Markdown declaration, which, as its name suggest, can be vulnerable regarding to code injection. See dcc.Markdown | Dash for Python Documentation | Plotly

For instance:

    txt = []
    txt.append("# Query report")
    txt.append("Content, blabla...")
    txt.append(df.iloc[0:10].to_html())
    mkdcomponent = dcc.Markdown("\n\n".join(txt),dangerously_allow_html=True)
    app.layout = html.Div(mkdcomponent)

Gives something like:

screenshot
screenshot1891×436 161 KB

That allows me to quickly display my pandas DataFrame into my markdown report which, in my code, was more flexible than the approach of using the built-in DataTable component

Probably it is not a solution to recommend to anyone, but since it took me time to figure out how to do and this post seemed like the only one to talk about it, I’m posting here just in case.

11

Hi @GDelevoye and welcome to the Dash community :slightly_smiling_face:

That’s an interesting work-around, but here is how you could get a report like that displayed in an app without having to use dangerously_allow_html:

report = html.Div(
    [
        html.H1("Query Report"),
        html.Div("Content blabla"),
        dash_table.DataTable(
            columns=[{"name": i, "id": i} for i in df.columns],
            data=df.to_dict("records"),
            page_size=10,
        ),
    ]
)

app.layout = report

Also, now with the release of Dash v 1.21.0, there is an option to include html in markdown in a dataTable. :tada: (But note that it has the same security risks as your solution)

See some examples of how to use html in the dataTable here.