# A hyper link in DataTable cell content?
**URL:** https://community.plotly.com/t/a-hyper-link-in-datatable-cell-content/48412
**Category:** Dash Python
**Created:** [December 22, 2020, 11:06am UTC](https://community.plotly.com/t/a-hyper-link-in-datatable-cell-content/48412 "2020-12-22T11:06:54Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@spkunc](https://community.plotly.com/u/spkunc)
#### Post date: [December 22, 2020, 11:06am UTC](https://community.plotly.com/t/a-hyper-link-in-datatable-cell-content/48412/1 "2020-12-22T11:06:55Z")
Hi Community,
Is there an easy way to have a link in the DataTable cell of certain column?
I have not seen an example of such, reference only mentions markdown for tooltips so the only way I think of atm is to conditionally style when mouse hovers over a cell and create a call back to do the job. But this approach seems quite complicated to the problem I’m trying to resolve.
Can cell content be markdown?
Thank you,
Szymon
---
### Author:  [@Emil](https://community.plotly.com/u/Emil)
#### Post date: [December 22, 2020, 12:32pm UTC](https://community.plotly.com/t/a-hyper-link-in-datatable-cell-content/48412/2 "2020-12-22T12:32:42Z")
I am not sure if you can do it with `DataTable`, but i recently submitted a pull request to `DashTabulator` which makes this kind of use case possible. The concept is that you define a JavaScript asset that defines how to render the cell. For a link, it would be something like,
```auto
window.myNamespace = Object.assign({}, window.myNamespace, {
tabulator: {
toLink: function (cell, formatterParams, onRendered) {
const value = cell._cell.value
return "" + value + "";
}
}
});
```
This function is then passed to the `DashTabulator` component using the following syntax,
```auto
import dash_tabulator
import dash
import dash_html_components as html
from dash_extensions.javascript import Namespace
# The namespace here must match the name space of the JavaScript asset.
ns = Namespace("myNamespace", "tabulator")
# Setup some data
columns = [
{"title": "Name", "field": "name", "width": 150, "headerFilter": True, "editor": "input"},
{"title": "Link", "field": "link", "hozAlign": "center", "formatter": ns("toLink")}
]
data = [
{"id": 1, "name": "Oli Bob", "link": "https://www.google.com/"},
{"id": 2, "name": "Mary May", "link": "https://stackoverflow.com/"},
]
# Create example app.
external_stylesheets = ['https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css']
app = dash.Dash( __name__ , external_stylesheets=external_stylesheets)
app.layout = html.Div([
dash_tabulator.DashTabulator(id='tabulator', columns=columns, data=data),
])
if __name__ == ' __main__':
app.run_server(debug=False, port=7777)
```
EDIT: The solution of @Eduardo is much simpler and most likely what you are looking for. That being said, the approach above generalizes to all kind of components (buttons, images, icon, etc.), so it might be useful for more complicated use cases 🙂
---
### Author:  [@Eduardo](https://community.plotly.com/u/Eduardo)
#### Post date: [December 22, 2020, 12:54pm UTC](https://community.plotly.com/t/a-hyper-link-in-datatable-cell-content/48412/3 "2020-12-22T12:54:30Z")
Hi [spkunc](https://community.plotly.com/u/spkunc),
You need to add in the table column: **‘presentation’:‘markdown’** and the cell column must have this format:
```auto
['Description of the link']("url Link")
```
The table will show only the labels between brackets.
the ]( must be together without any space.
---
### Author:  [@spkunc](https://community.plotly.com/u/spkunc)
#### Post date: [December 22, 2020, 2:11pm UTC](https://community.plotly.com/t/a-hyper-link-in-datatable-cell-content/48412/4 "2020-12-22T14:11:34Z")
Hi Eduardo,
Thanks you for your suggestion. It works!
Szymon
---
### Author:  [@Eduardo](https://community.plotly.com/u/Eduardo)
#### Post date: [December 22, 2020, 2:15pm UTC](https://community.plotly.com/t/a-hyper-link-in-datatable-cell-content/48412/5 "2020-12-22T14:15:43Z")
Glad to hear that, and wellcome to the Community. 😀
---
### Author:  [@liczyrzepa](https://community.plotly.com/u/liczyrzepa)
#### Post date: [February 26, 2025, 12:34pm UTC](https://community.plotly.com/t/a-hyper-link-in-datatable-cell-content/48412/6 "2025-02-26T12:34:25Z")
Hello, somehow this solution broke formatting. I use this to add link to logs in case failure, and i’ve noticed that rows with link are taller then those without logs. Link in table is placed in upper left corner which is strange. All columns are ‘markdown’ so alignment should be everywhere the same…
---
### Author:  [@liczyrzepa](https://community.plotly.com/u/liczyrzepa)
#### Post date: [February 26, 2025, 3:18pm UTC](https://community.plotly.com/t/a-hyper-link-in-datatable-cell-content/48412/7 "2025-02-26T15:18:47Z")
We can format content of the cell which is markdown type by html code. For me links works as:
f"
Test logs
"