Wrap header while using global wrap = FALSE arg

[SverreFL]

Hi, thanks for a great package.

I want all my cell contents to be on one line so it's convenient to use wrap = FALSE. At the same time I want headers to wrap, but have been unable to get a working solution. Among other things I have tried modifying headerStyle

library(dplyr)
library(reactable)

df <- tibble(
  x = c("very long text")
)

reactable(
  df,
  wrap = FALSE,
  columns = list(
    x = colDef(
      name = "Very long title",
      width = 50,
      headerStyle = "white-space: normal;"
    )
  )
)

I am very greatful for all solutions, including possibly abandoning the wrap argument in favor of achieving the same behavior with colDef.

[glin]

wrap is currently global, so there's no way to do it for only headers or only cells. It's possible to override that though with a custom header element. headerStyle = "white-space: normal;" is on the right track but doesn't work because internally, the text wrap CSS is on a header element nested further down. But if you render your header in its own custom div/span, you can override all CSS on it, e.g.:

library(dplyr)
library(reactable)

df <- tibble(
    x = c("very long text")
)

reactable(
    df,
    wrap = FALSE,
    columns = list(
        x = colDef(
            name = "Very long title",
            header = function(value) {
              htmltools::tags$span(value, style = "white-space: normal;")  
            },
            width = 50
        )
    )
)