Rotate headers of a reactable in R Shiny

Question

See below a very simple R shiny app that renders a reactable.

https://kormir.shinyapps.io/reactable_example/

library(shiny)
library(reactable)
ui <- fluidPage(
  
  tags$head(tags$style(HTML('.ReactTable {border-collapse:collapse; }
                 .ReactTable .rt-thead .rt-td, .ReactTable .rt-thead .rt-th {
                   height: 200px;
                   word-wrap: break-word;
                   transform:
                     translate(10px, -25px)
                     rotate(-80deg);
                 }'))),
  
  reactableOutput('rt') 
  
)

server <- function(input, output) {
  
  output$rt <- renderReactable({
    reactable(mtcars[1:4,1:5], fullWidth = F)
  })
  
}

# Run the application 
shinyApp(ui = ui, server = server)

In tags$head you can see my attempt to rotate the headers but the result is awful:

Is there a simplier way to rotate properly the headers?

Thank you

Answer 1

Not sure what your expected result looks like, but how about this:

library(shiny)
library(reactable)

ui <- fluidPage(reactableOutput('rt'))

server <- function(input, output) {
  output$rt <- renderReactable({
    reactable(
      mtcars[1:4, 1:5],
      fullWidth = F,
      defaultColDef = colDef(
        align = "center",
        minWidth = 70,
        headerStyle = list(
          `white-space` = "nowrap",
          `transform-origin` = "50% 50%",
           transform = "rotate(-90deg)",
          `margin-top` = "10px",
          `margin-bottom` = "10px",
           borderColor = "#ffffff"
        )
      )
    )
  })
  
}

shinyApp(ui = ui, server = server)

This answer was useful to get here.