Floating column header for infinitely long Dash AG Grid

Dash Python
1

Hi,

does anyone know of a way to keep the header of a Dash AG Grid floating when it is infinitely long?

1 Like
2

Hi @subodhpokhrel7 !

I’m not sure of what you mean with “when it is infinitely long”.
The headers are always floating when scrolling.
Do you have an example?

3

Hi @Skiks ,
The grid has the autoHeight DOM Layout. So you can’t scroll the container the grid is in. To look at rows not in view, you’d have the scroll down the webpage. The headers aren’t floating when doing that. If the grid is containerized, the headers float.

4

Hello @subodhpokhrel7,

This is called a sticky position, you could mess with it by using some css.

5

I see! Agree with @jinnyzor!
Any part of the grid has a class you can use to customize the CSS, here you can use .ag-header to make the header sticky and .ag-body to set an offset for the content of the grid equals to the height the the header.

Here is a simple example you can try:

CSS

To put in a CSS file in /assets, like /assets/my_style.css:

body {
    margin: 0;
}

#my-grid .ag-header {
    position: fixed !important;
    z-index: 1;
}

/*Value to adapt if there is a custom header height, floating filters, column groups*/
#my-grid .ag-body {
    top: 50px;
}

Code

import dash_ag_grid as dag
from dash import Dash, html
import pandas as pd

app = Dash(__name__)

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)

columnDefs = [
    {"field": "athlete"},
    {"field": "age"},
    {"field": "country"},
    {"field": "date"},
    {"field": "sport"},
    {"field": "total"},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="my-grid",
            rowData=df.head(50).to_dict("records"),
            columnDefs=columnDefs,
            defaultColDef={"resizable": True, "sortable": True, "filter": True},
            dashGridOptions={"domLayout": "autoHeight"},
            columnSize="sizeToFit",
        ),
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)
2 Likes