Hey there,
I’m new to Dash. I’m wondering if there is a way to format table cells like ‘kg/103m3’ to be kg/10<sup>3</sup>m<sup>3</sup>
for row_index in range(len(df.Unit.values)):
if df.Unit.values[row_index] == 'kg/103m3':
df.Unit.values[row_index] = 'kg/10U+00Bx3m3'
Thanks you all, any help is appreciated. 
what about conditional formatting? Maybe something like this section might help you: " Special Characters like Emojis, Stars, Checkmarks, Circles"
Another option would be, is to insert an image to represent the units and/or use html formatting as in Allow HTML content in Markdown cells by AnnMarieW · Pull Request #916 · plotly/dash-table · GitHub
Hi @mzcode
@jcuypers is correct, and you can use html in Markdown in a DataTable,
Here’s an example:
from dash import Dash, html, 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(__name__, external_stylesheets=[FONT_AWESOME])
df = pd.DataFrame(
dict(
[
("unit", ["kg/10<sup>3</sup>m<sup>3</sup>", "kg/10<sup>3</sup>m<sup>3</sup>", "kg/10<sup>3</sup>m<sup>3</sup>"]),
("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": "unit", "name": "Unit", "presentation": "markdown"},
{"id": "city", "name": "City"},
{"id": "icon", "name": "", "presentation": "markdown"},
],
markdown_options={"html": True},
style_table={"width": 200},
)
]
)
if __name__ == "__main__":
app.run_server(debug=True)
Hey jcypers,
thanks for your reply, it really helps.
@AnnMarieW thank you so much!
I just tried it, it works, only the cell kind of cut-off 
for row_index in range(len(df.Unit.values)):
if df.Unit.values[row_index] == 'g/e3m3':
df.loc[row_index, 'Unit'] = 'kg/10<sup>3</sup>m<sup>3</sup>'
html.Div([
dash_table.DataTable(
id='voc_table',
css=[dict(selector="p", rule="margin: 0px;",)],
data=df.to_dict('records'),
columns=[
{"name": i, "id": i, "deletable": False, "selectable": True, }
if i == "CAC" or i == "Fuel" or i == "Source"
else (
# {"name": i, "id": i, "deletable": True, "selectable": True,'type':'numeric', 'format': {'specifier': '.3e'} }
{"name": i, "id": i, "deletable": True, "selectable": True, 'presentation': 'markdown'}
if i == "Unit"
else {"name": i, "id": i, "deletable": True, "selectable": True}
)
for i in df.columns
],
markdown_options={"html": True},
tooltip_duration = 2000,
style_data_conditional=[
],
editable=False, # not allow to edit data of all cells
sort_action="native",
sort_mode='single', # sort by a single column
row_deletable=False, # choose if user can delete a row (True) or not (False)
page_action="native", # all data is passed to the table up-front or not ('none')
page_current=0, # page number that user is on
page_size=20, # number of rows visible per page
filter_action="native",
filter_options={"case": "insensitive"}, # insensitive case when use filter to search
fill_width=True,
style_cell={'textAlign': 'left','minHeight':'100%'},
style_table={'minWidth': '100%', 'justify-content': 'center'},
style_data={ # overflow cells' content into multiple lines
'whiteSpace': 'normal',
'height': 'auto',
'font_family': 'roboto',
'size': '20px',
'color': 'black',
},
style_header={
'backgroundColor': 'white',
# 'fontWeight': 'bold'
'font_family': 'roboto',
'size': '19px',
'color': 'black',
},
),
], # style={'height': 750, 'overflowY': 'hidden','overflowX': 'hidden'}
style={'height': '800', 'width': 'twelve columns'},
className="row-cols-datatable"
),
or maybe some conditional formatting for this column if you don’t mind a slightly different look. haven’t played with that much
Setting the row height does work, but you’d have to adjust this dynamically each time, however, this is an issue with padding inside the cell.
You can pass this in order to adjust the padding:
style_cell={'padding':0}
Thanks!!!
it worked, i tried put ‘padding’ in style_cell, it’s not working as expected…but i put it in ‘css’, it worked
css=[dict(selector="p", rule="margin: 0px; padding:1.5px",)],
Thank you so much!
Thank you so much, everyone! 
Just one more question, could we also use Markdown in a dropdown? Like could ‘kg/103m3’ be one of the options of a dropdown?
I look through the document Dropdown | Dash for Python Documentation | Plotly
it doesn’t mention Markdown.
Thanks in advance. And sorry if it’s a silly question…
It’s not a silly question! dcc.Dropdown supports components as props, including dcc.Markdown, but that’s not yet available in the dropdown inside the DataTable. A workaround might be to create an html table.
Great! Thank you so much @AnnMarieW
A dcc.Dropdown like a regular one is good enough for me, no need to embedded one inside DataTable
I tried some like this, but it doesn’t generate a correct markdown style…
dcc.Dropdown(
[{ 'label': dcc.Markdown('kg/10<sup>3</sup>m<sup>3</sup>', style={'font-family': 'roboto', 'font-size': '18px', 'color': 'black','presentation': 'markdown'}),
'value': 'kg/10<sup>3</sup>m<sup>3</sup>'}],
# options=['kg/10<sup>3</sup>m<sup>3</sup>'],
multi=True,
id="some_id"
)
Is there any other documents that i can refer to?
Thank you in advance 
Apologize if i ask too much…
Hello @mzcode,
You maybe be able to utilize the markdown to create the drop-down itself, you have to determine what values actually get passed to the dataframe on your server side, and then adjust them accordingly.
Happy to help! Componenets as props is a fairly new feature in dash, so there aren’t a lot of examples yet.
Here’s how to format the dropdown options with markdown. Note that you need to include the prop dangerously_allow_html=True. (This only shows one option)
You can find more infomation in the dcc.Dropdown docs - Components as Options Labels section
dcc.Dropdown(
options=[
{
"label": dcc.Markdown(
"kg/10<sup>3</sup>m<sup>3</sup>",
dangerously_allow_html=True,
),
"value": "kg/10<sup>3</sup>m<sup>3</sup>",
}
],
multi=True,
style={
"font-family": "roboto",
"font-size": "18px",
"color": "black",
},
id="some_id",
),
Morning @AnnMarieW
It works!
Thank you so much for your help! I really appreciate it.
Morning @jinnyzor
Thank you!