Hi Handsontable!
I’m using afterGetColHeader callback to align text in handsontable column like in example below:
afterGetColHeader: function (col, TH) { $(TH).css('text-align', 'right'); }
But, when I have nestedHeaders I want to align them in center, my question is on afterGetColHeader how I distinct nestedHeaders to the rest of columns?
I have this:
and I want to to this:
Any help please?
Best Regards,
DIT
Hi @dit
Unfortunately, the afterGetColHeader hook works for data underneath the nested header structure so when we (for example) want to change a header color to red for all headers with an index col < 3 we get the following result.
As you can see only headers that start with columns within an index of 0 till 3 share the red font color.
The same situation is when we use the nth-child pseudo selector for the tr element like here: Handsontable example - JSFiddle - Code Playground
The text-align: right !important; is totally ignored.
NOTE: I think that we should change the behavior for the afterGetColHeader or add another option to easily style headers.
Hi aleksandra_budnik,
thx for your reply!
Our purpose is align column text based on column data type. example:
So, we are using afterGetColHeader hook to check column data type and align column header text.
But, like I said before we cannot distinct nestedHeaders to the rest of columns.
Can you put some html class on nestedHeaders to identify them? With this class I can verify if TH element has this class is nestedHeader so alignment is center.
Best Regards,
DIT
I think that it could be a good idea. I was also thinking about adding row parameter to the afterGetColHeader, as currently, I cannot see any workaround for this issue.
Thx for your reply!
But we need this “yesterday”! Can you please add this for next release? We “only” need one class in nestedHeaders columns 
Best regards,
DIT!
It may be a good idea for us both, but under the hood Handsontable may be checking if some classes are present and doing something else after that. I remember I have been talking about a similar issue with one of our developers and he has told me that the headers processes are currently very complex.
I will discuss the issue with our devs but it won’t be added to our next release (next month) as the version has been already closed for development.
Hi again @dit
I have a good news! I have a working demo, the previous one was missing a single the element: http://jsfiddle.net/jrkkqqLk/
In the following example, the second level header is aligned left while all the other elements are centered. Here are the settings
.handsontable thead TR:nth-child(2) th {
text-align: left;
}
Let me know if it works for you as well.
Hi aleksandra_budnik!
.handsontable thead TR:nth-child(1) th {
text-align: center;
}
This solution unfortunately does not work for me 
because all my handsontables has the same css, js, and if I havn’t nestedHeaders text column is aligned to the center.
Better solution is put some html class on nestedHeaders like you said before 
Best regards,
DIT!
@dit can you share a demo with your settings? I’ll check if there’s a CSS workaround.
http://jsfiddle.net/jrkkqqLk/5/
In this example I have a generic function to built all my HT’s and I only want nested headers with font-sizet: 1.9em; . If I use this:
.handsontable thead TR:nth-child(1) {
font-size: 1.9em;
}
first HT has font-sizet: 1.9em; in column header text, and doesn’t have nestedColumns.
Understand?
Best Regards,
DIT
Hi @dit sorry for a delay.
all this settings are pure CSS, if you would like to have all headers in font-size: 1.9em then you use .handsontable thead TR, if only the first one then .handsontable thead TR:nth-child(1) and if the second one .handsontable thead TR:nth-child(2).
I am really sorry but we have been talking about nestedHeaders and then you’ve wrote that
so I have to say that I am a little bit lost. However, here Handsontable example - JSFiddle - Code Playground I have placed a very similar example to what you have posted in the first comment and I hope it will come in handy.
thanks for your reply, but this solution does not work!
All my HT’s has the same css! So, if I have 2 HT’s, all my columns will have with same css…
see your example here, but with 2 HT’s:
http://jsfiddle.net/827gy3oc/1/
2nd HT does not have nestedHeaders, and I only want to apply some styles in nestedHeaders.
My question is: can you put a HTML class in nestedHeaders please?
Best Regards,
DIT
Hi @dit
I am really sorry I couldn’t help you with this request. I totally ignored the fact about ‘not having’ or ‘switching’ a non-nested header structure. I think that actually, classes may help here.
I have come up with another example, but I am not sure if it would meet your project requirements, here it is http://jsfiddle.net/Lpxbt3w5/
I have sent the idea to our internal ticketing system, however, for features - not bugs, we usually set lower priority. I will discuss the case with our developers if they could add the following code to a next release
Thx for your reply
“not bugs, we usually set lower priority” - why lower priority this feature? We really need this 
Best Regards,
DIT
Usually, but not always. I just do not want to give any promises as I am not the one who creates the milestones. However, I’ll do my best to push the idea as fast as I can.
Hi @dit
we have just released a new version 1.13.0 and are planning new tasks, however we have also found a high priority bug that has to be fixed first https://github.com/handsontable/handsontable/issues/4442
up!
