Cannot add a symbol to indicate a dashtable column is editable

user_13507819 0
Viewed 224

I have following editable dash datatable: enter image description here

However it is not clear for other user that the entries of last two columns can be modified manually, if the user wishes to do so. In the following screenshot, I have changed manually the red marked entries. enter image description here

Is there a way to add the following symbol enter image description here so that it's clear that the entries of last two columns (not the columns name) are editable.

My current code for this datatable is:

dash_table.DataTable(
                id='growth_pe',
                # columns=[{'name': i, 'id': i} for i in growth_pe_table.columns],
                columns = [
                    dict(id='company', name='Company'),
                    dict(id='historical_growth_rate', 
                        name='Historical EPS Growth Rate\n (min, mean or annualized, max)'),
                    dict(id='historical_pe',
                        name='Historical PE\n (min, mean, max)'),
                    dict(id='annual_growth_rate',
                        name='Annual EPS Growth Rate\n %', type='numeric', 
                        format=percentage, editable=True),
                    dict(id='pe', name='PE', editable=True)
                ],

Thank you for any suggestions.

Solution:

After doing some research, there is now no way to add icon into dashtable header, which would be perfect for my problem. The current best solution is in my opinion to colour the editable columns and use a tooltip:

        tooltip_header={
                'historical_growth_rate': 'If (1 + EPS Growth Rate) > 0\
                     -> Annualized growth rate, if < 0 -> Mean value',
                'annual_growth_rate': {
                    'value': 'This column is editable. \n\n For 12.7% \
                    Growth Rate, enter: 0.127\n\n![edit]({})'.format(
                        app.get_relative_path('/assets/images/Edit_Icon.jpg')),
                        'type': 'markdown'},
                'pe': {
                    'value': 'This column is editable.\n\n![edit]({})'.format(\
                        app.get_relative_path('/assets/images/Edit_Icon.jpg')),
                    'type': 'markdown'}
            },
        tooltip_delay=0,
        tooltip_duration=None,
        tooltip={
                    # column: {'value': 'This column is editable.\n\n![edit]({})'.format(
                    #     app.get_relative_path('/assets/images/Edit_Icon.jpg')),
                    #     'type': 'markdown'}
                    # for column in ['annual_growth_rate', 'pe']
                'annual_growth_rate': {
                    'value': 'This column is editable. \n\n For 12.7% \
                    Growth Rate, enter: 0.127\n\n![edit]({})'.format(
                        app.get_relative_path('/assets/images/Edit_Icon.jpg')),
                        'type': 'markdown'},
                'pe': {
                    'value': 'This column is editable.\n\n![edit]({})'.format(\
                        app.get_relative_path('/assets/images/Edit_Icon.jpg')),
                    'type': 'markdown'}
                },

In case someone would like to see how it looks like, the link to the webapp: https://gunardi-dashboard.herokuapp.com

The relevant code can be found here: https://github.com/gunardilin/valuation_dashboard/blob/main/Dashboard.py and look for the following keywords: growth_pe

plotly-dash python
1 Answers

Hmm yes I see how you got that SVG from the built-in feature where dash datatable allows you to toggle user-renaming of columns. I don't think there would be any simple (in Python) ways to also carry over that feature for the editing. I don't see styling code in your example given, so not sure how you colored the columns. But indeed there are built-in style parameters for color-highlighting specific cols/rows/cells, conditionally, or explicitly.

E.g., you could add something like the following:


    style_data_conditional=[{
        'if': {'column_editable': True},
        'backgroundColor': 'rgb(30, 0, 0)',
        'textDecoration': 'underline',
        'textDecorationStyle': 'dotted',
    }]

where style_data_conditional is an attribute that would go within the parentheses of the dash_table.DataTable.

Another idea that comes to mind which would be pretty close is you could use the multi-headers feature, and have an extra header row underneath the main real one with the column names, and leave all non-editable columns blank, but use a unicode symbol to indicate the editable columns.

Ah! Or, actually, here's an even better and less hacky solution. How about conditional highlighting (by coloring and dashed underlining of column name(s)) plus a hoverable tooltip that will show the pencil image?

Here's an example: enter image description here

dash_table.DataTable(
    data=df_jobs.to_dict("records"),
    columns=[{"name": i, "id": i} for i in df_jobs.columns]
    + [{"name": "# of Openings", "id": "no_of_openings", "editable": True}],
    style_header_conditional=[
        {
            "if": {"column_editable": True},
            "backgroundColor": "rgb(250, 0, 0, 0.5)",
            "textDecoration": "underline",
            "textDecorationStyle": "dotted",
        }
    ],
    style_data_conditional=[
        {"if": {"column_editable": True}, "backgroundColor": "rgb(250, 0, 0, 0.25)"}
    ],
    # markdown_options={"html": True},
    tooltip_data=[
        {
            "no_of_openings": {
                "value": "![This column is editable](../assets/images/editable_dash_svg.png)",
                "type": "markdown",
                "delay": None,
                "duration": None,
            }
        }
    ],
),

I zoomed in real close and took a screenshot of the pencil, and put a copy of that as a png under my assets/images folder, and apparently the latest versions of dash datatable allow for markdown injection into tooltips, including linked images! You can further edit the formatting of the tooltip, making it smaller, and I would assume many other fine tuning things like adding a border and moving the coordinates of where it appears. Here's a link to those docs: (See the "Styling" subsection in particular).

user_67146270
Related