Info Buttons inside DataTable Cells and Headers

Dash Python
1

Hello everyone,

I am looking to adding info buttons to my dash_table.DataTable. I have found that with the option markdown_options={"html": True} I can add a button to one of the cells as shown in this image:

grafik
grafik764×140 3.15 KB

However, there are 2 things I did not manage to do:

  1. Add such a button to the headers (I would like to have one after “Category”). It seems that there is no HTML supported there at all (or please correct me if I am wrong).
  2. Create a callback for the info button in the table cell. I am aware that I could use a workaround where the callback is triggered if the cell with “Category 1” is clicked, but I would like some way to add the callback only for clicking on the button. I think the issue is that I cannot (or just don’t how to) use the dash component html.I(className="fa fa-info-circle info-icon", id="category-one-info") in the table, but I can just add plain HTML (so <i class="fa fa-info-circle info-icon" id="category-one-info"></i>) and then I can’t seem to register this component with dash.

Does anyone have any ideas on how to achieve 1 or 2 (or both)? Thanks a lot in advance :slight_smile:

Here is the full code:

import dash
from dash import html, dash_table
import pandas as pd

app = dash.Dash(__name__, external_stylesheets=['https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'])


df = pd.DataFrame({
    'Name': ['Alice', 'Bob'],
    'Category': [
        'Category 1 <i class="fa fa-info-circle info-icon" id="category-one-info"></i>',
        'Category 2'
    ]
})

app.layout = html.Div([
    dash_table.DataTable(
        id='table',
        columns=[
            {'name': 'Name', 'id': 'Name'},
            {'name': 'Category', 'id': 'Category', 'presentation': 'markdown'}
        ],
        data=df.to_dict('records'),
        style_cell={'textAlign': 'left'},
        markdown_options={"html": True},
    ),
    html.Div(id='info-output')
])


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