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 