What is the id for a DataTable column header?

Dash Python
1

I want a modal that has a DataTable column header as its target. What is the target id for a column header?

2

I’m not exactly sure what your question is, but I’ll try to help.

Take this example of code that I have in front of me right now:

    columns = []
    for i in df.columns:
        if i == "prod_id" or i == "generic_id":
            columns.append({'name': i, 'id': i, 'deletable': False,
                            'selectable': True, 'hideable': False})
        elif i != "id":
            columns.append({'name': i, 'id': i, 'deletable': False,
                           'selectable': False, 'hideable': True})

You can see with my DataTable, when I have parsed it out from a Pandas DataFrame, I have given it a name (which is what the user sees) and I have given it an id (which is how the system will identify it).

So if I want to target that column for something, say a conditional filter, I will point to the ‘id’ of that component/column.

Does that answer your question?

EDIT: You will see how I have an elif i != id. I want the ID to exist, just not be visible to the user. That is a column of the DataFrame and doesn’t relate to the question that you’ve asked.

1 Like
3

We are talking about the same thing. I want a dbc.Popup to appear when I move the mouse to the column header. I can do it for any cell in the DataTable but not the column headers.

Until recently, this worked - but it stopped working after I upgraded:

' {table_id} th.dash-header.column-{column_nr}'.format(table_id='myTable', column_number='0')

This would be the ID for the header of column 0 in myTable. I used it as the target for a Popup.

The method is described here: https://stackoverflow.com/questions/63381116/hover-over-column-header-for-description-in-dash-datatable

4

If the table header id I am using is correct, then the problem is in dbc.Popover which I am using as a tooltip
This is quite possible since I upgraded dash-bootstrap-components recently.

5

hi @dnordfors

I haven’t tried with the dbc.Popover yet, but Dash data_table has a built-in tooltip. Here’s an example with a tooltip activated once you hover over a column.

6

Hi @adamschroeder - the built in tooltip lacks the functionality of dbc.Popover (which is wonderful)
The dbc.Popover can host any object, it can be activated both by hover and click. Once activated, the mouse can be moved inside the Popover - which is impossible with the built-in tooltip.
My column-header-popover contains a summary of the data in the column, such as max/min numeric values, counts for items in the column etc. This list of info can get lengthy enough for it to need to be scrollable, which the built-in tooltip cannot manage. I want to add controls inside the popover, functions that will be applied to the specific column in question.

The natural target for anything that addresses a column as a whole is the column header. A column header id that can be used as a target is therefore very powerful and, I will suggest, a necessary feature for building advanced tables.

7

@adamschroeder Here is the Popover in an early version that emulates a Tooltip. The content does not work well with the builtin tooltip, I did not manage to make it look good. I did not put too much energy into it, I admit, because I decided for the Popover based on the opportunity to put interactive objects inside it

image
image1920×2560 411 KB