# How to add checkbox to ag-grid column header

**URL:** <https://community.plotly.com/t/how-to-add-checkbox-to-ag-grid-column-header/83501>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [April 2, 2024, 1:57am UTC](https://community.plotly.com/t/how-to-add-checkbox-to-ag-grid-column-header/83501 "2024-04-02T01:57:50Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![wowwwn](https://avatars.discourse-cdn.com/v4/letter/w/f07891/32.png) [@wowwwn](https://community.plotly.com/u/wowwwn)\
**Post date:** [April 2, 2024, 1:57am UTC](https://community.plotly.com/t/how-to-add-checkbox-to-ag-grid-column-header/83501/1 "2024-04-02T01:57:50Z")

</div>

[https://www.ag-grid.com/javascript-data-grid/column-headers/#keyboard-navigation](https://www.ag-grid.com/javascript-data-grid/column-headers/#keyboard-navigation)

I would like to know how to add a dash component(checkbox) like the country column’s header in the grid of the keyboard-navigation description in the link above.

I want to select multiple columns and handle them in the dash callback.

Thanks in advance

---

<div class="post-metadata">

**Author:** ![PyGuy](https://avatars.discourse-cdn.com/v4/letter/p/dfb087/32.png) [@PyGuy](https://community.plotly.com/u/PyGuy)\
**Post date:** [April 2, 2024, 1:11pm UTC](https://community.plotly.com/t/how-to-add-checkbox-to-ag-grid-column-header/83501/2 "2024-04-02T13:11:09Z")

</div>

Are you looking for [Header Checkbox Selection](https://dash.plotly.com/dash-ag-grid/checkbox-row-selection#header-checkbox-selection)?

---

<div class="post-metadata">

**Author:** ![wowwwn](https://avatars.discourse-cdn.com/v4/letter/w/f07891/32.png) [@wowwwn](https://community.plotly.com/u/wowwwn)\
**Post date:** [April 3, 2024, 10:22am UTC](https://community.plotly.com/t/how-to-add-checkbox-to-ag-grid-column-header/83501/3 "2024-04-03T10:22:42Z")

</div>

Thank you for your response @PyGuy.

“headerCheckboxSelection” is similar to what I’m looking for, bug I want to like to have a checkbox in every column header and use the corresponding values in the callback each time it is checked.

```auto
dbc.Checklist(
	#options=[
	#	{"label": "Option 1", "value": 1},
	#	{"label": "Option 2", "value": 2},
	#	{"label": "Disabled Option", "value": 3, "disabled": True},
	#],
	value=[1],
	id="checklist-input",
),

```

As in the code above, I can create a separate checklist component and put the column names in the options to implement the desired functionality.  
However, it’s not intuitive and when the column order in the dash\_ag\_grid of the web app is changed, no callback is captured, making it impossible to correspond the order of options in the checklist to it.

---

<div class="post-metadata">

**Author:** ![wowwwn](https://avatars.discourse-cdn.com/v4/letter/w/f07891/32.png) [@wowwwn](https://community.plotly.com/u/wowwwn)\
**Post date:** [April 3, 2024, 11:42am UTC](https://community.plotly.com/t/how-to-add-checkbox-to-ag-grid-column-header/83501/4 "2024-04-03T11:42:19Z")

</div>

I figured out.  
I found how to do it by here:

[Column selection in Dash AG Grid - #12 by subodhpokhrel7](https://community.plotly.com/t/column-selection-in-dash-ag-grid/81007/12)