Change Background Color of Specific Column Header

[danielone]

Is it possible to have a unique background color for a specific column's header? So all the columns use the default styling except for a specific one.

[wcjordan]

I think you should be able to create a custom header cell component for that column. See this example for a similar case: http://schrodinger.github.io/fixed-data-table-2/example-collapse.html

[danielone]

Thank you @wcjordan , will look into this to see if can help!

[srobertson]

hi @wcjordan, while it's true you can add custom header content, what we're trying to do is style the column, or the column header (possibly based on the column).

As you can see from the below image. As far as I can tell... If I insert a cell component and make it's background red, I can't necessarily make the entire cell look red.

[wcjordan]

Would it be possible for you to share a CodePen or JsFiddle reproducing what you're seeing?

I was able to achieve this by updating the RemovableHeaderCell to this:

<Cell {...props} style={{backgroundColor: 'red'}}>
  {children}
  <a style={{float: 'right'}} onClick={() => callback(columnKey)}>
    {'\u274C'}
  </a>
</Cell>

Here's a sample JsFiddle, in case it helps you share an example: https://jsfiddle.net/pvt3dc1r/