# Ag grid header tabs?

**URL:** <https://community.plotly.com/t/ag-grid-header-tabs/86685>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [August 20, 2024, 6:41pm UTC](https://community.plotly.com/t/ag-grid-header-tabs/86685 "2024-08-20T18:41:15Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![chauenst](https://avatars.discourse-cdn.com/v4/letter/c/71c47a/32.png) [@chauenst](https://community.plotly.com/u/chauenst)\
**Post date:** [August 20, 2024, 6:41pm UTC](https://community.plotly.com/t/ag-grid-header-tabs/86685/1 "2024-08-20T18:41:16Z")

</div>

Hi,

I had a quick question. Is it possible to input custom components within headers of an AG Grid?

Goal:  
My hope is to have one of my columns be a tabbed header which will change the displayed data within the column based on which tab is selected.

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [August 20, 2024, 7:59pm UTC](https://community.plotly.com/t/ag-grid-header-tabs/86685/2 "2024-08-20T19:59:35Z")

</div>

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

```python

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"

```auto
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:

> **[PyCafe - Dash - Example of button in header of dash ag grid triggering a...](https://py.cafe/amward/dash-ag-grid-component-in-header)**
>
> Create & Share Streamlit, Dash and Python Apps Online.