Dash AG Grid headerTooltip as a function

Dash Python
1

Hey community!

I am using AG Grid with a lot of columns that have cells with short data so it often happens that data in those columns is displayed properly but the header isn’t. My idea was to create a headerTooltip that corresponds to the headerName of each column. Because I dont want to do that manually I was thinking along the lines of:

  defaultColDef={
      "headerTooltip": {"function": "params.colDef.headerName"},
  },

, but this displays [object Object]. Does anyone have a quick fix for this or should I go with tooltipComponent and JS?

thanks!

2

The headerTooltip only takes a string. You can create the string from the Python side, for example:

columnDefs = [{"field": i, "headerTooltip": i} for i in df.columns]

Otherwise, yes, you would need to use the tooltipComponent

3

Yeah I figured… Thanks for the reply!

4

For anyone interested in a workaround with tooltipComponent I ended up using this approach:

  • define your grid with defaultColDef
defaultColDef={
    "headerTooltip": "placeholder",
    "tooltipComponent": "headerNameTooltip",
},
  • Put the following in the dashAgGridComponentFunctions.js file in the assets folder
var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};

// *************************************** Custom Tooltips *********************************************
// headerName
dagcomponentfuncs.headerNameTooltip = function (props) {
    return React.createElement(
        "span",
        { className: "your-className-for-headerTooltip" },
        [
            React.createElement("span", null, `${props.colDef.headerName}`),
        ]
    );
}

Now styling is open to you with the className.

EDIT:
The simplest way is to just add className ag-tooltip:

dagcomponentfuncs.headerNameTooltip = function (props) {
    return React.createElement(
        "span",
        { className: "ag-tooltip" },
        props.colDef.headerName
    );
}
3 Likes