Components as DataTable data?

Dash Python
1

Is it possible to render a Dash component within a Dash DataTable ?

The following code returns an Objects are not valid as a React child error. Is that a known limitation or is there a way to hack around ?

import dash
import dash_table
import dash_html_components as html


app = dash.Dash(__name__)

a = html.Img(src='https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/microsoft/209/see-no-evil-monkey_1f648.png')
b = html.Img(src='https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/microsoft/209/hear-no-evil-monkey_1f649.png')
c = html.Img(src='https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/microsoft/209/speak-no-evil-monkey_1f64a.png')

app.layout = dash_table.DataTable(
    id='table',
    columns=[
        {"name": 'title', "id": 'title'},
        {"name": 'img', "id": 'img'}],
    data=[
        {'title': 'A', 'img': a},
        {'title': 'B', 'img': b},
        {'title': 'C', 'img': c}
    ]
)

if __name__ == '__main__':
    app.run_server(debug=True)
2

This isn’t possible right now. However it looks like you are trying to render images as cells: for this you can use the markdown presentation option.

3

Thanks for the answer. This was just a dummy example, the actual use case was to build a dynamic table with a column of individual map objects at each row. So markdown wont suffice unfortunatly.

4

Ah ok. Yeah in this case you’ll need to use html.Table