DashTable tooltip incorrectly displayed when using sort

Dash Python
1

The tooltip appears in the incorrect position after sorting the table. I ran a quick test using a snippet from DataTable Tooltips | Dash for Python Documentation | Plotly, and just added sort_action="native". How can this be resolved? Or any suggestions/workarounds?

from dash import Dash, dash_table

app = Dash(__name__)

app.layout = dash_table.DataTable(
    data=[
        {'shop': 'Bakersfield', 'sales': 4, 'goal': 10},
        {'shop': 'Berkeley', 'sales': 10, 'goal': 1},
        {'shop': 'Big Bear Lake', 'sales': 5, 'goal': 4}
    ],
    columns=[
        {'id': 'shop', 'name': 'Store Location'},
        {'id': 'sales', 'name': 'Sales Revenue'},
        {'id': 'goal', 'name': 'Revenue Goal'},
    ],
    tooltip_data=[
        {
            'shop': 'Location at Bakersfield',
            'sales': '$4M in Revenue',
            'goal': {'value': '6M **under** Goal', 'type': 'markdown'}
        },
        {
            'shop': 'Location at Berkeley',
            'sales': '$10M in Revenue',
            'goal': {'value': '9M **over** Goal', 'type': 'markdown'}
        },
        {
            'shop': 'Location at Big Bear Lake',
            'sales': '$5M in Revenue',
            'goal': {'value': '1M **over** Goal', 'type': 'markdown'}
        },
    ],
    tooltip_delay=0,
    tooltip_duration=None,
    sort_action="native",

)

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

Hello @Peilin

Here you can fin information about this issue:

https://community.plotly.com/t/tooltip-position-appears-in-upper-left-corner-after-filtering-or-sorting-in-the-datatable/36375/8

https://github.com/plotly/dash-table/issues/872

4

Hi, I encountered that thread as well, thanks. Is it possible to get the state of the table even after sorting? It seems that State('table', 'data') returns only the original table/dictionary; and State('table', 'sort_by') returns only the column and sorting method information. Is it possible to get back a state or dictionary with the order of the sorted table?

7

Hey @Peilin

To get the state of the table after sorting, try these props:

derived_viewport_data ( list of dicts ; optional): This property represents the current state of data on the current page. This property will be updated on paging, sorting, and filtering.

derived_virtual_data ( list of dicts ; optional): This property represents the visible state of data across all pages after the front-end sorting and filtering as been applied.

Plus there are also derived_viewport_* amd derived_virtual_* props for indices, row_ids, selected_columns, selected rows and selected_row_ids. See more information in the Reference

1 Like
8

Thanks! Right, so my idea was to get the sorted table data back and put it back to tooltip_data=[] with the updated (sorted) order. I have printed out the array and it looks correct, but it does not seem to work. Here’s what I tried.

The table, simplifed version:

app.layout = dash_table.DataTable(
    id='table',
    data=[
        {'shop': 'row 1'},
        {'shop': 'row 2'},
        {'shop': 'row 3'}
    ],
    columns=[
        {'id': 'shop', 'name': 'Store Location'},
    ],
    tooltip_data=[],
    tooltip_delay=0,
    tooltip_duration=None,
    sort_action="native",
)

The callback:

@app.callback(
    Output('table', 'tooltip_data'),
    Input('table', 'derived_viewport_data'),
)
def table(derived_viewport_data):
    tooltip_data = []
    if derived_viewport_data:
        for i in derived_viewport_data:
            tooltip_data.append(i)

    print(tooltip_data)
    return tooltip_data