# Is it possible to set clip-paths conditionally on a dash table?

**URL:** <https://community.plotly.com/t/is-it-possible-to-set-clip-paths-conditionally-on-a-dash-table/54993>\
**Category:** Dash Python\
**Created:** [July 24, 2021, 9:54am UTC](https://community.plotly.com/t/is-it-possible-to-set-clip-paths-conditionally-on-a-dash-table/54993 "2021-07-24T09:54:33Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![BvdLind](https://avatars.discourse-cdn.com/v4/letter/b/439d5e/32.png) [@BvdLind](https://community.plotly.com/u/BvdLind)\
**Post date:** [July 24, 2021, 9:54am UTC](https://community.plotly.com/t/is-it-possible-to-set-clip-paths-conditionally-on-a-dash-table/54993/1 "2021-07-24T09:54:33Z")

</div>

The code below

```auto
from dash import Dash
import dash_table
import pandas as pd

df = pd.DataFrame({"data": [1, 2, 3, 4, 5]})
app = Dash( __name__ )

app.layout = dash_table.DataTable(
    id="table",
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict("records"),
    style_data_conditional=[
        {
            "if": {
                "filter_query": "{data} >= 3",
            },
            "backgroundColor": "yellow",
            "clipPath": "circle()",
        }
    ],
)

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

```

results in this

 ![showcase](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/4/47627f18fdaa48ac8ca29c75c263b4309662c001.png)

The clip-path is not added to the inline styles. This is also the case for other style properties like border radius.

But if I add the inline styles manually it does work

 ![showcase2](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/e/ec907146307f56a153c663852b909c01500e53a1.png)

Am I missing something or is this not supported?

I could of course add the clipping path via css, but the goal is to conditionally show different shapes based on the data.

---

<div class="post-metadata">

**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [July 24, 2021, 1:30pm UTC](https://community.plotly.com/t/is-it-possible-to-set-clip-paths-conditionally-on-a-dash-table/54993/2 "2021-07-24T13:30:12Z")

</div>

Hi @BvdLind

I think that in the new release you can do that using markdown:

See the examples showed by @AnnMarieW in the anouncement:

> [@mega Dash v1.21.0 - Plotly.js 2.0, Icicle Charts, Bar Chart Patterns, Clipboard Component, Bug Fixes](https://community.plotly.com/t/dash-v1-21-0-plotly-js-2-0-icicle-charts-bar-chart-patterns-clipboard-component-bug-fixes/54892/3):
>
> Here are a few more examples of new features in this release confetti_ballDisable days in DatePickerRange and DatePickerSingle components . Thanks to @tcbegley for doing this [pull request](https://github.com/plotly/dash-core-components/pull/948) This was a frequently requested feature on the forum and it’s a nice addition to Dash. This example makes weekends in April disabled: [image] # Example for making weekends in April disabled: from datetime import datetime, timedelta import dash import dash\_core\_components as dcc import dash\_html\_co…

or goes to the repository to see the examples:

> <https://github.com/plotly/dash-table/pull/916>
>
> closes #915
> closes #800
> 
> This pull request allows for the use html tags in ma…rkdown text.
> 
> As discussed \[here in in #915\](https://github.com/plotly/dash-table/issues/915#issuecomment-866281607) DataTable uses Remarkable for its markdown and the default is set to disable html input, probably to reduce XSS vulnerabilities. This PR adds the \`html\` option to \`markdown\_options\` prop to make it possible to "opt in" and allow html in markdown.
> 
> I found \[this reported security issue\](https://snyk.io/vuln/SNYK-JS-REMARKABLE-174641) with Remarkable which was fixed in 2019 in version 1.7.2. DashTable currently uses version ^2.0.1. I'm not sure I understand the XSS risks -- I think this would be a good topic to include in the docs. Would there be less risk if the markdown columns are not editable when html is allowed?
> 
> 
> 
> Also for the docs, \[here\](https://daringfireball.net/projects/markdown/syntax#html) is some good info about using html with markdown, and below are 3 examples to show some of the new features:
> - Using Font Awesome icons
> - Changing the color of icons with conditional formatting
> - Using html to format text
> - Including images in markdown
>  
> 
> 
> \--------------
> 
> \### Examples
> 
> \*\*Font Awesome Icons \`\<i\>\`\*\* 
> !\[image\](https://user-images.githubusercontent.com/72614349/123658118-48471500-d7e6-11eb-8cac-6c80402ad6a2.png)
> 
> 
> \`\`\`
> import dash
> import dash\_html\_components as html
> import dash\_table
> import pandas as pd
> 
> 
> FONT\_AWESOME = "https://use.fontawesome.com/releases/v5.10.2/css/all.css"
> 
> clouds = '\<i class="fa fa-cloud" style="color: grey;"\>\</i\>'
> rain = '\<i class="fa fa-cloud-rain"\>\</i\>'
> sun = '\<i class="fa fa-sun" style="color: gold;"\>\</i\>'
> 
> app = dash.Dash(\_\_name\_\_, external\_stylesheets=\[FONT\_AWESOME\])
> 
> df = pd.DataFrame(
> dict(
> \[
> ("temperature", \[13, 43, 50\]),
> ("city", \["NYC", "Paris", "Seattle"\]),
> ("icon", \[sun, clouds, rain\]),
> \]
> )
> )
> 
> app.layout = html.Div(
> \[
> dash\_table.DataTable(
> css=\[dict(selector="p", rule="margin: 0px;")\],
> data=df.to\_dict("records"),
> columns=\[
> {"id": "city", "name": "City"},
> {"id": "temperature", "name": "Temperature"},
> {"id": "icon", "name": "", "presentation": "markdown"},
> \],
> markdown\_options={"html": True},
> style\_table={"width": 200},
> )
> \]
> )
> 
> if \_\_name\_\_ == "\_\_main\_\_":
> app.run\_server(debug=True)
> \`\`\`
> \---
> 
> \*\*Change Color of Icons with Conditional Formatting
> Formatting text with html\*\*
> !\[image\](https://user-images.githubusercontent.com/72614349/123659461-90b30280-d7e7-11eb-92b7-f0cdef697c73.png)
> 
> \`\`\`
> import dash
> import dash\_html\_components as html
> import dash\_table
> import pandas as pd
> 
> 
> FONT\_AWESOME = "https://use.fontawesome.com/releases/v5.10.2/css/all.css"
> 
> dot = '\<i class="fa fa-circle" \>\</i\>'
> 
> app = dash.Dash(\_\_name\_\_, external\_stylesheets=\[FONT\_AWESOME\])
> 
> df = pd.DataFrame(
> dict(
> \[
> (
> "flight",
> \[
> "American Airlines \<em\>AA125\</em\>",
> "Air Canada \<em\>AC1538\</em\>",
> "Alaska Airlines \<em\>AS649\</em\>",
> "British Airways \<em\>BA145\</em\>",
> \],
> ),
> ("status", \["On Time", "Canceled", "Delayed", "On Time"\]),
> ("icon", \[dot, dot, dot, dot\]),
> \]
> )
> )
> 
> app.layout = html.Div(
> \[
> dash\_table.DataTable(
> css=\[dict(selector="p", rule="margin: 0px;")\],
> data=df.to\_dict("records"),
> columns=\[
> {"id": "flight", "name": "Flight", "presentation": "markdown"},
> {"id": "status", "name": "Status"},
> {"id": "icon", "name": "", "presentation": "markdown"},
> \],
> markdown\_options={"html": True},
> style\_table={"width": 200},
> style\_data\_conditional=\[
> {
> "if": {
> "filter\_query": '{status} = "Canceled"',
> "column\_id": "icon",
> },
> "color": "tomato",
> },
> {
> "if": {"filter\_query": '{status} = "Delayed"', "column\_id": "icon"},
> "color": "gold",
> },
> {
> "if": {"filter\_query": '{status} = "On Time"', "column\_id": "icon"},
> "color": "green",
> },
> \],
> )
> \]
> )
> 
> if \_\_name\_\_ == "\_\_main\_\_":
> app.run\_server(debug=True)
> \`\`\`
> \-----------
> 
> 
> \*\*Adding images using the html \<img\> tag. This can make it easier to control image size and add other style.\*\*
> 
> !\[image\](https://user-images.githubusercontent.com/72614349/123661129-28652080-d7e9-11eb-91f4-a35b846980ce.png)
> 
> 
> \`\`\`
> import dash
> import dash\_html\_components as html
> import dash\_table
> import pandas as pd
> 
> seattle = "\<img src='https://upload.wikimedia.org/wikipedia/commons/2/23/Space\_Needle\_2011-07-04.jpg' height='75' /\>"
> paris = "\<img src='https://upload.wikimedia.org/wikipedia/commons/a/a8/Tour\_Eiffel\_Wikimedia\_Commons.jpg' height='75' /\>"
> nyc = "\<img src='https://upload.wikimedia.org/wikipedia/commons/d/dd/Lady\_Liberty\_under\_a\_blue\_sky\_%28cropped%29.jpg' height='75' /\>"
> 
> 
> app = dash.Dash(\_\_name\_\_)
> 
> df = pd.DataFrame(
> dict(
> \[
> ("temperature", \[13, 43, 50\]),
> ("city", \["NYC", "Paris", "Seattle"\]),
> ("image", \[nyc, paris, seattle\]),
> \]
> )
> )
> 
> app.layout = html.Div(
> \[
> dash\_table.DataTable(
> css=\[dict(selector="p", rule="margin: 0px;")\],
> data=df.to\_dict("records"),
> columns=\[
> {"id": "image", "name": "", "presentation": "markdown"},
> {"id": "city", "name": "city"},
> {"id": "temperature", "name": "temperature"},
> \],
> markdown\_options={"html": True},
> style\_table={"width": 200},
> )
> \]
> )
> 
> if \_\_name\_\_ == "\_\_main\_\_":
> app.run\_server(debug=True)
> \`\`\`

---

<div class="post-metadata">

**Author:** ![BvdLind](https://avatars.discourse-cdn.com/v4/letter/b/439d5e/32.png) [@BvdLind](https://community.plotly.com/u/BvdLind)\
**Post date:** [July 24, 2021, 1:39pm UTC](https://community.plotly.com/t/is-it-possible-to-set-clip-paths-conditionally-on-a-dash-table/54993/3 "2021-07-24T13:39:36Z")

</div>

Wow that’s great, thank you! I knew about the markdown option, but not that it now also supports html.