reactable rotate headers

[shannon.pileggi]

Hi! I am using {reactable} and I am interesting in rotating column headers. I tried the reactableTheme approach demonstrated in reactableTheme documentation. However, I can't quite get it. Here is what I have tried, any suggestions would be much appreciated!

I am using the reactable dev version 0.2.3.90.

library(reactable)

reactable(
  iris[1:30, ],
  showSortable = TRUE,
  theme = reactableTheme(
    headerStyle = list(
      "&:rotate" = list(transform = "rotate(90deg)")
    )
  ))

^{Created on 2022-01-27 by the reprex package (v2.0.1)}

[grrrck]

Here's an approach, but I have to warn you that it will require much fiddling with CSS to get it to look okay. In the docs, they mention &:hover, which is SASS speak for the :hover psuedo-class (or hover state) on the current element. In other words, & is a placeholder for the current element in the CSS rule.

.special {
  &:hover { 
    color: purple ;
  }
}

The above SCSS (i.e. SASS that looks like CSS) is equivalent to

.special:hover {
  color: purple;
}

In this case, you want to apply the transform to the header element directly, so you can skip the & and add camel-cased CSS declarations to the headerStyle argument directly. (Camel-cased means that a CSS property like transform-origin is written like transformOrigin.)

So here's some code that does more or less what you want.

library(reactable)

reactable(
  iris[1:30, ],
  showSortable = TRUE,
  theme = reactableTheme(
    headerStyle = list(
      transform = "rotate(-90deg)",
      transformOrigin = "bottom left",
      height = "5em"
    )
  )
)

The result is... going to need some work