Hi, is there a way to make Dash AG Grid columns selectable as it is for rows?

Sure, here you go: [image] css file: .headerSelected { background-color: #66c2a5 } js file: const {useImperativeHandle, useRef, useState, useEffect, forwardRef, Component} = React var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {}; var dagcomponentfuncs = window.d…

Hello @subodhpokhrel7 , There isn’t something to select an entire column. What is your use-case?

Hi @jinnyzor , Thank you. I’d like the user to be able to select two (out of multiple) columns for mathematical calculation for each cells in each row. Selecting from the header row should also work, but the whole column being highlighted when selected would make it visually better.

You could make the visual change by using cellClassRules styling and headerClass as well. You can add checkboxes as well, then build a dcc.Store that maintains your chosen columns and use that in your class functions.

Hi @jinnyzor , is there a way to add checkboxes to headers and not make it look like the whole table is selected when any box is selected? If not, can a separate row be added with checkboxes? I’m trying to do the styling of columns on selection here: from dash import Dash, html, Input, Output, c…

Hi @jinnyzor , It works great. Thank you. I have two follow up questions though, is there a way to limit the selections? Let’s say up to 2 columns. Also, it is not possible to use the cellClicked property of AG Grid anymore to see the column ID of the selected (and there isn’t a headerClicked or …

[image] subodhpokhrel7: Also, it is not possible to use the cellClicked property of AG Grid anymore to see the column ID of the selected (and there isn’t a headerClicked or similar). Is there another way how I could see/store the column ID of the selections? The column selections are stored i…

I had tried to print the selections after each clicks with Input('headerSelections_sync', 'n_clicks'), but it did not work as intended. Adding a continue button worked fine and printing the selections after click works fine. The limit to selections can now be added based of number in dcc.Store. Tha…

Hi @jinnyzor , I want to revisit this as I have run into a slight problem. The storage of the selected columns in localStorage causes persistence and also doesn’t work when run in incognito mode (or when cache is cleared or run in a new browser) with Cannot read properties of null (reading 'includ…

Did you try replacing all local in the code with session?

Column selection in Dash AG Grid

Dash Python

subodhpokhrel7 January 10, 2024, 1:23pm 12

Yes, in both of the files as well.

How to add checkbox to ag-grid column header

Topic		Replies	Views
How to add checkbox to ag-grid column header Dash Python question	3	1603	April 3, 2024
Restoring AG Grid columns after dragging from view Dash Python question	26	1942	September 22, 2023
Selected Rows in Dash AG Grid Dash Python tips-and-tricks	6	4958	October 12, 2023
AG Grid: Column with checkbox (boolean value)? Dash Python question	11	10038	April 23, 2023
Dash AG Grid - New examples in the docs Dash Python	9	2227	August 10, 2023

Column selection in Dash AG Grid

Related topics