rotate column names?

[RDastgh1]

Great package! I'm converting all my code over from kable, and I was wondering ---- is there a way to rotate column names to make the column names more legible when they are long? It's the one thing I haven't been able to figure out from the docs

[glin]

Hi, by rotate, do you mean text wrapping? If so, you can disable/enable wrapping of long text like in this example: https://glin.github.io/reactable/articles/examples.html#no-text-wrapping.

If not, could you provide an example or screenshot of what you're describing?

[lucasfcnunes]

I want to rotate the columns headers by some arbitrary number of degrees.

• For example:
  • 45°:
  • 90°:

source: https://css-tricks.com/rotated-table-column-headers/

[statquant]

Hello, I was about to send the exact same question. The following code might be a start:

reactable(                           
  mtcars[1:4, 1:5],                  
  fullWidth = FALSE,                 
  defaultColDef = colDef(            
    align = "left",                  
    headerStyle = list(              
      transform-origin` = "50% 50%", 
      transform = "rotate(315deg)",  
      margin-top` = "10px",          
      margin-bottom` = "10px",       
      background = "#f7f7f8"         
    )                                
  ),                                 
  bordered = TRUE,                   
  highlight = TRUE                   
)     

But that's still fairly ugly. @glin I would really appreciate some pointers

[statquant]

Hello @glin would you have any idea about this, I know it does not look like much but it actually save a massive amount of space on the display and helps a lot to convey more information.

[glin]

So this is super finicky and will almost definitely require some manual tweaking of the translateY, translateX, width, and height values, but appears to work. If you create a wrapper div for each of your headers, you can style them with transform: rotate(), provide enough width/height space, and move them around until they look fine. For manual tweaking, it's a lot easier to start with something and then tweak the CSS values live in your browser devtools panel.

Not sure if there's an easier way, but this is pretty much what the CSS Tricks article does. (also FYI @lucasfcnunes)

reactable(                           
  mtcars[1:4, 1:5],
  fullWidth = FALSE,
  defaultColDef = colDef(
    align = "left",
    header = function(name) {
      htmltools::div(
        style = "transform: rotate(315deg) translateY(6px) translateX(2px); height: 40px; width: 50px;",
        name
      )
    }
  )
)

reactable(                           
  mtcars[1:4, 1:5],
  fullWidth = FALSE,
  defaultColDef = colDef(
    align = "left",
    header = function(name) {
      htmltools::div(
        style = "transform: rotate(315deg) translateY(6px) translateX(2px); height: 40px; width: 50px;",
        name
      )
    }
  ),
  bordered = TRUE
)