rshinyreactable

Vertically align text in reactable cells in shiny app


Is there a way to vertically align (middle) the text in the cells in a reactable rendered within a shiny app?

Minimal example below. I tried some CSS options but no luck so far.

library(shiny)
library(reactable)

ui <- fluidPage(
  titlePanel("reactable example"),
  reactableOutput("table")
)

server <- function(input, output, session) {
  output$table <- renderReactable({
    reactable(iris)
  })
}

shinyApp(ui, server)

Solution

  • You can use defaultColDef to set default attributes. Below code snippet should vertically align text centrally:

    library(shiny)
    library(reactable)
    
    ui <- fluidPage(
        titlePanel("reactable example"),
        reactableOutput("table")
    )
    
    
    
    server <- function(input, output, session) {
        output$table <- renderReactable({
            reactable(iris, 
                      defaultColDef = colDef(
                          align = "center")
                      )
        })
    }
    
    shinyApp(ui, server)
    

    Below is the output after running the code. The output is both centrally & horizontally aligned

    enter image description here