Black Lives Matter. Please consider donating to Black Girls Code today.

Tables in Markdown

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

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

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…

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.

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: https://github.com/plotly/dash-core-components/blob/master/package.json

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