How to manually select column and change background?

Tags: #<Tag:0x00007f8b2b0c5810>

Hi guys,

This time this is my new question. Is there a way I can manually select a column, for example by clicking a button?

Detailed example: I have a button called “Select column 3”, when the user clicks the button, it should manually select column 3 and give it a custom background color as well coz I’m planning to change the default background.

Is that possible?

Hi @hugh

yes, there is. We have 3 related methods

Here are all those methods in use https://jsfiddle.net/9ceoyqga/

If you’d like to select a whole row you can use selectCell() and countCols() method, like here https://jsfiddle.net/9ceoyqga/1/

Hi @aleksandra_budnik

Thanks for that detailed demos. By the way, is there a way I could also change the default background color for the selected column?

Thank you.

Yes, you can. I suggest using custom classes.

https://jsfiddle.net/fwzrjvnc/

Result
22

CSS
40

JS
46

ps. here’s a list of supported className changes

Hi @aleksandra_budnik,

wow, thanks for those! I’ll check them out.Thanks again!

you’re welcome :slight_smile:

1 Like

Hi again @aleksandra_budnik ,

Ahm I hope it’s alright if I will add a follow-up question coz it’s somehow related. What if I add a custom background without selecting the column/s.

For example, what if I just want to permanently set background color for columns 1 and 3 to be green. You know, just to set these columns noticeable - to let the user know that these columns are quite important than the other columns. I’ve read about setCellMeta, but I don’t know how to use/implement it.

Thank you for taking the time.

@hugh here’s an example https://jsfiddle.net/Lgtumo12/

I’m using cells method to handle classes for cells and afterGetColHeader hook to attach classes to headers.

1 Like

Hi @aleksandra_budnik

Thanks so much for that solution! Nice!

I always happy to help :slight_smile: