Superscript in a DataTable cell

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>

I tried this way, but it didn’t work, it just pass the markdown

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. :slight_smile:

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


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(
            ("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(
            css=[dict(selector="p", rule="margin: 0px;")],
                {"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__":

1 Like

Hey jcypers,

thanks for your reply, it really helps.

1 Like

@AnnMarieW thank you so much! :slight_smile:

I just tried it, it works, only the cell kind of cut-off :sweat_smile:

and i read all data from an excel file, so i overwritten the unit

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>'
            css=[dict(selector="p", rule="margin: 0px;",)],
                {"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,

            editable=False,  # not allow to edit data of all cells
            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_options={"case": "insensitive"},  # insensitive case when use filter to search
            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',

                'backgroundColor': 'white',
                # 'fontWeight': 'bold'
                'font_family': 'roboto',
                'size': '19px',
                'color': 'black',

    ],  # style={'height': 750, 'overflowY': 'hidden','overflowX': 'hidden'}
        style={'height': '800', 'width': 'twelve columns'},

or maybe some conditional formatting for this column if you don’t mind a slightly different look. haven’t played with that much

1 Like

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:


it worked, i tried put ‘padding’ in style_cell, it’s not working as expected…but i put it in ‘css’, it worked :slight_smile:

css=[dict(selector="p", rule="margin: 0px; padding:1.5px",)],

Thank you so much!


Thank you so much, everyone! :grin:


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.

1 Like

Great! Thank you so much @AnnMarieW :grin:
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…
Screenshot 2022-12-22 at 4.00.20 PM


                [{  '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>'],

Is there any other documents that i can refer to?
Thank you in advance :+1: 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

                    "label": dcc.Markdown(
                    "value": "kg/10<sup>3</sup>m<sup>3</sup>",
                "font-family": "roboto",
                "font-size": "18px",
                "color": "black",

Morning @AnnMarieW
It works! :slight_smile:
Thank you so much for your help! I really appreciate it. :grin:

1 Like

Morning @jinnyzor
Thank you! :grin:

1 Like