How to style specific column headers?

Tags: #<Tag:0x00007f8b25976c58>
#1

I want to style specific column headers, basically setting different backgrounds and borders. It does not follow a predictable order so I cannot do this with CSS nth-child and such. I have to do it based on the columns I have.

I found that I can set className on a column, but this only applies to the cells. I tried the different header related class names like currentHeaderClassName and activeHeaderClassName but this seems to have no effect when set on a column.

I also cannot find any kind of “header renderer” API, even though there is a afterGetColHeaderRenderers which implies there’s a renderer defined somewhere…

I know I can use HTML in the col header string itself, but this is limited to just the inner text, so I can’t effectively manipulate the parent TH (since CSS can’t select a parent, yet) to set a background, for example.

I can use afterGetColHeader to manipulate the TH element, but this is a bit hard to use and only gives me the visual column index, but I’m using nestedHeaders and need to know the row as well.

So, this is a handful of questions or feature requests, depending on what I maybe missed. I want to:

  1. Set a column header class name, say column.headerClassName.
  2. Set a column header renderer, say column.headerRenderer, with signature like (instance, TH, col, row, colHeader, columnProperties) => TH where colHeader is the value passed to colHeaders or nestedHeaders for that specific TH, and columnProperties is the ColumnSettings for the column associated with that header.
  3. Add row or headerLevel to afterGetColHeader.
#2

Hey @abeall

you’re right - we do not have any official API for column renderers. We can only push some logic via afterGetColHeader hook but it breaks if you use innerHTML instead of text methods.

You can also use colHeaders like here https://jsfiddle.net/wq0yzmte/ but it forces you to return something for each header and the class cannot be added to the TH element, it can be added to some other child elements.

I’m not sure how complicated it would be to allow developers to recreate the headers with a custom logic but it is definitely something that we should discuss.

Can I ask you to share the subject on Github? We usually use forum for discussion and GH for bugs and ideas.

#3