HTML Charcode in datatable?

Dash Python
1

Is there any way to put a symbol based on its HTML code (I’m not sure what the correct word for this is). For example, if I wanted a green dot, I would use html code 🟢 :green_circle:

More here: https://emojiguide.org/green-circle

2

could you try looking up the utf8 character and pasting that into your code as text?

3

I’m not sure I understand what you’re asking me to do, but if I put the value of all records for the column as U+1f7e2, it doesn’t work - it just shows the text. Is that what you wanted me to do?

FYI, the column type is ‘text’ and i tried with the presentation as ‘markdown’ and without a presentation attribute at all.

4

What I mean is copy and paste the smbol directly into your code, so html.Div('🟢')

5

I’m trying to do it in a datatable… I’m sure that would work as part of the page, but if I do something like:

df['status'] = html.Div('🟢')

I get an error: ValueError: Length of values does not match length of index when it tries to insert that into the dataframe.

I’d like to use the green dot to indicate a status of Open or Closed, instead of putting the word in the cell. I know I can use an image and I may just use that, but I wasn’t sure if it is possible to use the special character instead.

6

right so try putting that special string directly in your data. &#1234 won’t work since we don’t execute html, but it should work if you use the character directly

7

dash_table.DataTable(data=[{‘col1’: ‘:green_circle:’}])

8

This doesn’t seem to work… Error: Objects are not valid as a React child

Objects are not valid as a React child (found: object with keys {props, type, namespace}). If you meant to render a collection of children, use an array instead.

dt = dash_table.DataTable(
    id='table',
    columns=[{"name": "one", "id": "one"}],
    data=[{'one': html.Div('🟢')}],
)

layout = html.Div([
    html.H3('Test'),
    dt,
])

If I do it without the columns= argument, nothing is displayed at all (except for my “Test” H3 div.

9

Don’t do this, do this:

Literally copy and paste the symbol directly into your data. No html.Div and no &#1228944…

10

Here is the full example:

import dash_table
import dash

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(data=[{'col1': '🟢'}], columns=[{'name': 'col1', 'id': 'col1'}])

app.run_server(debug=True)

image

1 Like
11

This works! Thank you!

Seems totally obvious in retrospect…

1 Like