# Add a HTML component into a cell \`dash-table\`

**URL:** https://community.plotly.com/t/add-a-html-component-into-a-cell-dash-table/26535
**Category:** Dash Python
**Created:** [July 29, 2019, 1:47pm UTC](https://community.plotly.com/t/add-a-html-component-into-a-cell-dash-table/26535 "2019-07-29T13:47:35Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![LucasVN](https://avatars.discourse-cdn.com/v4/letter/l/898d66/32.png) [@LucasVN](https://community.plotly.com/u/LucasVN)
#### Post date: [July 29, 2019, 1:47pm UTC](https://community.plotly.com/t/add-a-html-component-into-a-cell-dash-table/26535/1 "2019-07-29T13:47:35Z")

</div>

Hello guys,

I have to add custom html element into datatable cells like :

`html.Button(["Change choice"], className="btn btn-primary btn-round")`  
or  
`html.Span(["37%"], className="btn btn-primary btn-outline-primary btn-round score")`

How can I make that please ?

---

<div class="post-metadata">

### Author: ![Marc-Andre](https://avatars.discourse-cdn.com/v4/letter/m/e19b73/32.png) [@Marc-Andre](https://community.plotly.com/u/Marc-Andre)
#### Post date: [July 29, 2019, 2:34pm UTC](https://community.plotly.com/t/add-a-html-component-into-a-cell-dash-table/26535/2 "2019-07-29T14:34:19Z")

</div>

@LucasVN Thanks for the question. This is not currently possible in the table as it would either require supporting components as properties, which we do not do at the moment and is still on an unknown timeline, or requiring extra presentation options in the table, which is not in the plans in the short term.

---

<div class="post-metadata">

### Author: ![akash1](https://avatars.discourse-cdn.com/v4/letter/a/db5fbb/32.png) [@akash1](https://community.plotly.com/u/akash1)
#### Post date: [October 20, 2022, 7:28am UTC](https://community.plotly.com/t/add-a-html-component-into-a-cell-dash-table/26535/3 "2022-10-20T07:28:18Z")

</div>

Do we have any update on this question ?

---

<div class="post-metadata">

### Author: ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)
#### Post date: [October 20, 2022, 7:35am UTC](https://community.plotly.com/t/add-a-html-component-into-a-cell-dash-table/26535/4 "2022-10-20T07:35:27Z")

</div>

Hi @akash1 ,

I don’t think so. But there is a way to include a button behavior:

> [@Button inside a Dash Table](https://community.plotly.com/t/button-inside-a-dash-table/51460):
>
> Hi Everybody, Today @AnnMarieW and I performed an option to have a kind of Button inside a Dash data Table. Let me explain the trick: Use active\_cell property of the table as Input of a callback. The active\_cell property has (at least) 3 elements of the active cell, those are row, column, and column\_id. That means if a user selects the second element of the first column the active\_cell will give us the following information: {‘row’: 1, ‘column’: 0, ‘column\_id’: ‘first\_column\_name’} Then us…

---

<div class="post-metadata">

### Author: ![akash1](https://avatars.discourse-cdn.com/v4/letter/a/db5fbb/32.png) [@akash1](https://community.plotly.com/u/akash1)
#### Post date: [October 20, 2022, 9:25am UTC](https://community.plotly.com/t/add-a-html-component-into-a-cell-dash-table/26535/5 "2022-10-20T09:25:05Z")

</div>

Thanks @AIMPED for the suggestion.  
However i am trying create an image or canvas to put into cell with user initials so that the users who don’t have their profile images uploaded, will have these canvas with initials there.

---

<div class="post-metadata">

### Author: ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)
#### Post date: [October 20, 2022, 10:37am UTC](https://community.plotly.com/t/add-a-html-component-into-a-cell-dash-table/26535/6 "2022-10-20T10:37:14Z")

</div>

@akash1,

Have you looked into markdown?

---

<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: [October 20, 2022, 11:40am UTC](https://community.plotly.com/t/add-a-html-component-into-a-cell-dash-table/26535/7 "2022-10-20T11:40:14Z")

</div>

You can use images as a tooltip:

> **[DataTable Tooltips | Dash for Python Documentation | Plotly](https://dash.plotly.com/datatable/tooltips#images-in-tooltips)**
>
> \`dash\_table.DataTable\` is an interactive table that supports rich styling, conditional formatting, editing, sorting, filtering, and more.

Or add special characters like emojis:

> **[Conditional Formatting | Dash for Python Documentation | Plotly](https://dash.plotly.com/datatable/conditional-formatting#special-characters-like-emojis,-stars,-checkmarks,-circles)**
>
> \`dash\_table.DataTable\` is an interactive table that supports rich styling, conditional formatting, editing, sorting, filtering, and more.
