Ag grid header tabs?

Dash Python
2

Yes, it’s possible to have a custom component in a header. Here is a simple example with a button to help you get started


from dash import Dash, html, dcc, Input, Output
import dash_ag_grid as dag
import pandas as pd

app = Dash()


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

app.layout = html.Div([
    dcc.Store(id="store-button"),
    dag.AgGrid(
            id="column-definition-ID",
            rowData=df.to_dict("records"),
            columnDefs=[{
                "field": "athlete",
                "headerName": "Athlete",
                "headerComponent": "ButtonHeader"  # select custom component
            }],
            columnSize="sizeToFit",
        ),
    html.Div(id="container")

])

@app.callback(
    Output("container", "children"),
    Input("store-button", "data")
)
def update(data):
    return str(data)

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

Put this in the `dashAgGridComponentFunctions.js file in the assets folder"

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

dagcomponentfuncs.ButtonHeader = function (props) {
    return React.createElement(
        'button',
        {
            onClick: () => {
                newData = JSON.stringify(new Date())
                dash_clientside.set_props("store-button", {data: newData})
            },
            className: props.className,
            style: props.style,
        },
        props.displayName)
}

See the example live here:

1 Like