Use dropdown link menu in Dash AG Grid

[jblang]

Here’s a minimal example…

dag-dropdown.py:

import dash_ag_grid as dag
from dash import Dash, html, dcc
import dash_bootstrap_components as dbc


social_links = [
    ("bi-linkedin", "LinkedIn", "https://linkedin.com"),
    ("bi-twitter", "Twitter", "https://twitter.com"),
    ("bi-facebook", "Facebook", "https://facebook.com"),
    ("bi-instagram", "Instagram", "https://instagram.com"),
    ("bi-youtube", "YouTube", "https://youtube.com"),
]

dev_links = [
    ("bi-github", "GitHub", "https://github.com"),
    ("bi-gitlab", "GitLab", "https://gitlab.com"),
    ("bi-bitbucket", "Bitbucket", "https://bitbucket.org"),
    ("bi-jira", "Jira", "https://atlassian.com"),
    ("bi-stack-overflow", "Stack Overflow", "https://stackoverflow.com"),
]

data = [
    {"type": "Social Media", "links": social_links},
    {"type": "Development", "links": dev_links}
]

columnDefs = [
    {
        "field": "type",
        "headerName": "Link Type",
    },
    {
        "field": "links",
        "headerName": "Links",
        "cellRenderer": "DropdownLinks",
    },
]


grid = dag.AgGrid(
    id="custom-component-btn-grid",
    columnDefs=columnDefs,
    rowData=data,
    columnSize="autoSize",
    dashGridOptions={"rowHeight": 48},
)


app = Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB])

app.layout = html.Div(
    [
        html.H1("Dash AG Grid + Dropdown Menu"),
        grid
    ]
)

if __name__ == "__main__":
    app.run(debug=True)

dashAgGridComponentFunctions.js:

var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};

function iconText(icon, text, children) {
    return React.createElement(
        'div',
        null,
        React.createElement(
            'i',
            { class: 'me-1 ' + icon },
        ),
        text,
        children
    );
}

dagcomponentfuncs.DropdownLinks = function (props) {
    return React.createElement(
        'div',
        { className: 'dropdown show' },
        React.createElement(
            'button',
            {
                className: "me-1 btn btn-primary btn-sm",
            },
            iconText("bi-link-45deg", "Links ", React.createElement(
                'i',
                { className: 'me-1 bi bi-caret-down-fill' },
            )),
        ),
        React.createElement(
            'div',
            { className: "dropdown-menu show" },
            props.value.map(([icon, title, url]) =>
                React.createElement(
                    'a',
                    { href: url },
                    iconText(icon, title)
                )
            )
        )
    )

};

The cells are a bit larger on this app (probably because not all the same stylesheets are loaded) and this allowed me to see that the dropdown is rendering but it appears to be clipped within the cell that it’s in (notice the top border under each button):

Is there any CSS style that could be applied to prevent it from being clipped?

Alternatively, I may look at your suggestion to use a cell editor instead since it has a built-in popup feature.