# Making a column cell in dash datatable clickable **URL:** \ **Category:** Dash Python\ **Created:** [December 27, 2022, 9:55am UTC](https://community.plotly.com/t/making-a-column-cell-in-dash-datatable-clickable/71149 "2022-12-27T09:55:26Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![briodev](https://avatars.discourse-cdn.com/v4/letter/b/8e7dd6/32.png) [@briodev](https://community.plotly.com/u/briodev)\ **Post date:** [December 27, 2022, 9:55am UTC](https://community.plotly.com/t/making-a-column-cell-in-dash-datatable-clickable/71149/1 "2022-12-27T09:55:26Z")
I want to make a column cell clickable in a dash datatable and return its value in a callback function. How can I do this? ---
**Author:** ![jcuypers](https://avatars.discourse-cdn.com/v4/letter/j/ebca7d/32.png) [@jcuypers](https://community.plotly.com/u/jcuypers)\ **Post date:** [December 27, 2022, 10:10am UTC](https://community.plotly.com/t/making-a-column-cell-in-dash-datatable-clickable/71149/2 "2022-12-27T10:10:03Z")
You should be able to find your answer in here: > **[Sorting, Filtering, Selecting, and Paging Natively | Dash for Python...](https://dash.plotly.com/datatable/interactivity)** > > \`dash\_table.DataTable\` is an interactive table that supports rich styling, conditional formatting, editing, sorting, filtering, and more. I’m not sure about the wording of your question, whether you mean any cell or a header or something similar. If its data, you can get the information through the active\_cell property. the active\_cell dict contains a row and col index which can be used to find whatever data in your data structure ---
**Author:** ![briodev](https://avatars.discourse-cdn.com/v4/letter/b/8e7dd6/32.png) [@briodev](https://community.plotly.com/u/briodev)\ **Post date:** [December 27, 2022, 10:17am UTC](https://community.plotly.com/t/making-a-column-cell-in-dash-datatable-clickable/71149/3 "2022-12-27T10:17:56Z")
It’s the header that I mean. I have tried looking solution from the reference you’ve provided but can’t find. ---
**Author:** ![jcuypers](https://avatars.discourse-cdn.com/v4/letter/j/ebca7d/32.png) [@jcuypers](https://community.plotly.com/u/jcuypers)\ **Post date:** [December 27, 2022, 10:22am UTC](https://community.plotly.com/t/making-a-column-cell-in-dash-datatable-clickable/71149/4 "2022-12-27T10:22:24Z")
I haven’t tried the header myself but isnt column id what you need ? `* `active\_cell`: this is the data cell the user has put the cursor on, by clicking and/or arrow keys. It's a dictionary with keys: - `row`: the row index (integer) - may be affected by sorting, filtering, or paging transformations. - `column`: the column index (integer) - `row\_id`: the `id`field of the row, which always stays with it during transformations. -`column\_id`: the `id` field of the column.` ---
**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\ **Post date:** [December 27, 2022, 10:23am UTC](https://community.plotly.com/t/making-a-column-cell-in-dash-datatable-clickable/71149/5 "2022-12-27T10:23:15Z")
Hello @briodev, What exactly do you mean by the column header data? ---
**Author:** ![briodev](https://avatars.discourse-cdn.com/v4/letter/b/8e7dd6/32.png) [@briodev](https://community.plotly.com/u/briodev)\ **Post date:** [December 27, 2022, 10:26am UTC](https://community.plotly.com/t/making-a-column-cell-in-dash-datatable-clickable/71149/6 "2022-12-27T10:26:38Z")
![Screenshot from 2022-12-27 13-23-59](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/4/2/42c6d9afa0343c04cf4dcab6b6a08fea86194989.png) @jinnyzor For example, in the screenshot above, say I click on “country”. I can have the data, “country” returned on a callback, also the column highlighted as active. ---
**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\ **Post date:** [December 27, 2022, 10:33am UTC](https://community.plotly.com/t/making-a-column-cell-in-dash-datatable-clickable/71149/7 "2022-12-27T10:33:05Z")
Do you know what functionality you want from the active column? ---
**Author:** ![briodev](https://avatars.discourse-cdn.com/v4/letter/b/8e7dd6/32.png) [@briodev](https://community.plotly.com/u/briodev)\ **Post date:** [December 27, 2022, 10:35am UTC](https://community.plotly.com/t/making-a-column-cell-in-dash-datatable-clickable/71149/8 "2022-12-27T10:35:05Z")
Yes. One highlight, the column as active. Two, update another graph depending on the column selected. ---
**Author:** ![jcuypers](https://avatars.discourse-cdn.com/v4/letter/j/ebca7d/32.png) [@jcuypers](https://community.plotly.com/u/jcuypers)\ **Post date:** [December 27, 2022, 10:40am UTC](https://community.plotly.com/t/making-a-column-cell-in-dash-datatable-clickable/71149/9 "2022-12-27T10:40:44Z")
but the first example does exactly this right? ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/5/5/558232a035f503ac0f7e75437c47ce20d535fe33.png) ```auto @app.callback( Output('datatable-interactivity', 'style_data_conditional'), Input('datatable-interactivity', 'selected_columns') ) def update_styles(selected_columns): return [{ 'if': { 'column_id': i }, 'background_color': '#D2F3FF' } for i in selected_columns] ``` you would just need to have some lookup for your column names updating the graph is just another output ---
**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\ **Post date:** [December 27, 2022, 11:17am UTC](https://community.plotly.com/t/making-a-column-cell-in-dash-datatable-clickable/71149/10 "2022-12-27T11:17:30Z")
It’s a good idea, and definitely useable. However, I think using active\_cell would not provide the same intuitive interaction as desired. For example, you want to adjust a cell outside of the highlighted column, you click and change the column. @briodev, This is a slick interaction. Welcome to the community btw! I don’t think there is a way to perform this natively, as I don’t think there is anything for headers being clicked. But… You can do this with a couple of clientside callbacks, as dcc.Store and a hidden button (`style={‘display’:’none’}`) I’ll see if I can type this out right on my phone. You’ll need to add jquery to your app for this code to work, you can use regular, but it’s harder to type on my phone. `external_scripts=[‘jquery reference’]` For the function to highlight: ```auto function setSelectedColumn (header) { i = header.cellIndex $(‘.selectedColumn’).removeClass(‘selectedColumn’) $(‘#yourtableid tr > td:nth-child (‘+i+’)’).addClass(“selectedColumn”) sessionStorage.setItem(‘yourdccstore’, header.innerText) $(‘#yourhiddenbutton’).click() } ``` Callbacks: ```auto app.clientside_callback( “””function clickHeader(i) { $(‘#yourtableid th’).on(‘click’, function () { setSelectedColumn(this) }) return window.dash_clientside.no_update }”””, Output(‘yourtableid’,’id’) Input(‘yourtableid’,’id’) ) app.clientside_callback( “””function syncStore(n){ if (n >0) { return sessionStorage.getItem(‘yourdccstore’) } return window.dash_clientside.no_update }”””, Output(‘youdccstore’,’data’), Input(‘yourhiddenbutton’,’n_clicks’) ) ``` In theory, this should populate the column info into your dcc.Store and then you can use a regular server side callback to update your figure based upon the input from that dcc.Store. Also, you can use the class of selectedColumn in your style sheet to give it a unique feel. ---
**Author:** ![briodev](https://avatars.discourse-cdn.com/v4/letter/b/8e7dd6/32.png) [@briodev](https://community.plotly.com/u/briodev)\ **Post date:** [December 27, 2022, 11:19am UTC](https://community.plotly.com/t/making-a-column-cell-in-dash-datatable-clickable/71149/11 "2022-12-27T11:19:53Z")
Thanks alot @jinnyzor