Vertically align text in a table cell

[ixodid198]

I wish to vertically center the text in my "Letter" column, which is tall because of the content in the adjacent "Numbers" column. I require the horizontal alignment of the "Letter" column to remain left-justified.

How do I do this with a Reactable table?

library(reactable)

x <- as.character(1:100) |> 
  paste0(collapse = ", ")

df <- tibble(
  Letter = LETTERS[1:3],
  Numbers = rep(x, 3)
)

reactable(df,
          compact = TRUE,
          fullWidth = FALSE,

          columns = list(
            Letter = colDef(
             align = "center"
            ),
            Numbers = colDef(
              width = 400
            )
          )
)

[glin]

There are a couple different ways to vertically align text, but here's one example that uses flexbox styles: https://glin.github.io/reactable/articles/cookbook/cookbook.html#show-data-from-other-columns-r

Applying that theme to this example:

reactable(df,
          compact = TRUE,
          fullWidth = FALSE,

          columns = list(
            Letter = colDef(
              align = "center"
            ),
            Numbers = colDef(
              width = 400
            )
          ),

          theme = reactableTheme(
            # Vertically center cells
            cellStyle = list(display = "flex", flexDirection = "column", justifyContent = "center")
          )
)

Vertical alignment is unfortunately tricky to do in reactable at the moment. These styles aren't obvious, and may also cause visual side effects in some rare cases. So at some point, I'd like to build an easier way to vertically align cells into reactable, either as a column option or theme option.

[ixodid198]

That works well for me. Thank-you.

[glin]

Vertical alignment is now officially supported in the development version:

• Cell content can now be vertically aligned using the new vAlign and headerVAlign arguments in colDef(), and the new headerVAlign argument in colGroup() (#142, #177).

So in the next version, you'll be able to remove the theme styles and use the column option instead:

reactable(
  df,
  compact = TRUE,
  fullWidth = FALSE,
  columns = list(
    Letter = colDef(
      vAlign = "center"
    ),
    Numbers = colDef(
      width = 400
    )
  )
)