Implementing Dual Scrollbars with AG Grid in Dash Application

📊 Plotly Python
1

I’m working on a Dash application that uses AG Grid, and I’m trying to implement a dual scrollbar system - one at the top and one at the bottom of the grid. However, I do not know if it is possible. Is there any guidance available to this? I tried replicating the scrollbar, and connecting it through clientside callbacks from dash without any success.

Any help is very welcome!

2

Hi @jankrans and welcome to the Dash community :slight_smile:

Can you please include a minimal example of what you have tried so far and what you mean by “replicating the navbar”?

In the meantime, here is more information about the grid size:

3

Hi, thank you for the welcome!

I’m sorry, I ofcourse meant that I tried replicating the scrollbar. :slight_smile:

In my situation I have a very large grid displayed, I’m currently looking into having the horizontal scrollbar, that is already present at the bottom at the grid, also on top of the grid. The autosize is not really what I want in this case.

grid = dag.AgGrid(
    id='grid',
    rowData=pd.DataFrame(),
    columnDefs=[],
    dashGridOptions={"domLayout": "autoHeight"},
    style={"height": None},

)

app.layout = html.Div([
    html.Div(id='top-scrollbar', style={'overflowX': 'auto', 'width': '100%'}),
    grid,
    html.Div(id='bottom-scrollbar', style={'overflowX': 'auto', 'width': '100%'})
])

clientside_callback(
    """
    function(topScroll, bottomScroll) {
        const container = document.querySelector('.ag-body-horizontal-scroll-viewport');
        if (container) {
            if (dash_clientside.callback_context.triggered[0].prop_id.includes('top')) {
                container.scrollLeft = topScroll;
            } else {
                container.scrollLeft = bottomScroll;
            }
        }
        return [container ? container.scrollLeft : 0, container ? container.scrollLeft : 0];
    }
    """,
    Output('top-scrollbar', 'scrollLeft'),
    Output('bottom-scrollbar', 'scrollLeft'),
    Input('top-scrollbar', 'scrollLeft'),
    Input('bottom-scrollbar', 'scrollLeft')
)
4

Hi @jankrans

There is no property in Dash or AG Grid that will trigger a callback on scroll. You might be able to do this with some CSS or JavaScript, but it seems like this is an uncommon use-case. Since it’s not dependent on Dash, you might have some luck getting an answer on StackOverflow. Here’s one post with some possible solutions javascript - horizontal scrollbar on top and bottom of table - Stack Overflow

Note that with large grids you can get performance issues with

 dashGridOptions={"domLayout": "autoHeight"},

This is not recommended - noet the warning at the bottom of this page: