Merge pull request #916 from AnnMarieW/markdown-html

Allow HTML content in Markdown cells

CHANGELOG.md

@@ -10,6 +10,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 
 ### Added
+- [#916](https://github.com/plotly/dash-table/pull/916) 
+  - Added `html` option to `markdown_options` prop. This enables the use of html tags in markdown text.
+
 - [#545](https://github.com/plotly/dash-table/issues/545)
     - Case insensitive filtering
     - New props: `filter_options` - to control case of all filters, `columns.filter_options` - to control filter case for each column

src/dash-table/components/Table/props.ts

@@ -163,6 +163,7 @@ export interface INumberLocale {
 
 export interface IMarkdownOptions {
     link_target: '_blank' | '_parent' | '_self' | '_top' | string;
+    html?: boolean;
 }
 
 export type NumberFormat =

src/dash-table/dash/DataTable.js

@@ -67,7 +67,8 @@ export const defaultProps = {
     },
 
     markdown_options: {
-        link_target: '_blank'
+        link_target: '_blank',
+        html: false
     },
 
     tooltip: {},
@@ -483,7 +484,13 @@ export const propTypes = {
         link_target: PropTypes.oneOfType([
             PropTypes.string,
             PropTypes.oneOf(['_blank', '_parent', '_self', '_top'])
-        ]).isRequired
+        ]),
+        /**
+         * (default: False)  If True, html may be used in markdown cells
+         * Be careful enabling html if the content being rendered can come
+         * from an untrusted user, as this may create an XSS vulnerability.
+         */
+        html: PropTypes.bool
     }),
 
     /**

tests/selenium/test_markdown_html.py

@@ -0,0 +1,38 @@
+import dash
+from dash_table import DataTable
+
+
+def get_app(markdown_options):
+
+    app = dash.Dash(__name__)
+
+    props = dict(
+        id="table",
+        columns=[dict(name="a", id="a", type="text", presentation="markdown")],
+        data=[dict(a="<h1>html h1 heading</h1>")],
+    )
+
+    if markdown_options is not None:
+        props["markdown_options"] = markdown_options
+
+    app.layout = DataTable(**props)
+
+    return app
+
+
+def test_tmdh001_html_not_allowed(test):
+    test.start_server(get_app(None))
+
+    h1_elements = test.find_elements("h1")
+
+    assert len(h1_elements) == 0
+    assert test.get_log_errors() == []
+
+
+def test_tmdh002_html_allowed(test):
+    test.start_server(get_app(dict(html=True)))
+
+    h1_elements = test.find_elements("h1")
+
+    assert len(h1_elements) == 1
+    assert test.get_log_errors() == []