How I can center the header of columns?

[Jorge-hercas]

Hi and thanks for reading me

I am working on some tables with the "reactable" package in r, but I would like to center only the headings of each column. For example:

library(reactable)
reactable(iris,
          defaultColDef = colDef(
            header = function(value) gsub(".", " ", value, fixed = TRUE),
            cell = function(value) format(value, nsmall = 1),
            align = "center",
            minWidth = 70,
            headerStyle = list(background = "#12a09a")
          ))

Apparently the option colDef(align = "center") centers the entire column, but is there an option to only center the title?

[glin]

Hi, there's no option to align headers individually, and it's rare enough that an option probably won't be added in the future. It may be possible to align headers individually using custom styles, but unfortunately, I haven't found a good way to do that yet. I think you'd have to override some internal CSS right now, which would likely break in a future release.

[lukr90]

I do this in the following way

      randomColumn = colDef(
        headerStyle = list(display = "flex", justifyContent = "center"))

[judytlewis]

I do this in the following way

      randomColumn = colDef(
        headerStyle = list(display = "flex", justifyContent = "center"))

This approach does not work for me. Have there been any updates that allow a user to center the column header but not the column data?

[federiva]

@judytlewis I'm doing it this way on my end.

Basically passing headerStyle in a theme like

reactableTheme(
  headerStyle = list("align-items" = "center", "text-align" = "center")
)

:warning: I have not tested it in an individual column as I want to keep styling consistent across all of the tables

library(shiny)
library(reactable)


my_table_theme <- reactableTheme(
  headerStyle = list("align-items" = "center", "text-align" = "center")
)

modified_iris <- iris
colnames(modified_iris) <- c(
  "123 456",
  "123 456 789",
  "123 456 789 012",
  "123 456 789 012 345",
  "123 456 789 012 345 678 123 456 789 012 345 678"
)

ui <- fluidPage(
  div(
    style = "width: 50%",
    reactableOutput("table")
  )
)


server <- function(input, output, session) {
  output$table <- renderReactable({
    reactable(
      data = modified_iris,
      theme = my_table_theme
    )
  })
}

shinyApp(ui, server)