Header rendering by default removes additional spaces between words

[szmsu2011]

Thanks for the continuous development of the package.

It seems that the header rendering by default removes additional spaces between words. I am unsure how to turn it off.

Example (not an actual use case, demo only):

library(tidyverse)
library(htmlwidgets)
library(reactable)

packageVersion("reactable")
#> [1] '0.2.3.9000'

## Attempt 1
iris %>%
  reactable(columns = list(Sepal.Length = colDef(name = "Sepal    Length")))

## Attempt 2
iris %>%
  reactable(columns = list(Sepal.Length = colDef(header = JS("
    function() {
      return 'Sepal    Length';
    }
  "))))

Wanted and expected:

Actual result:

I was unable to add additional spaces in the header name for Sepal.Length.

Could you please advise if it is achievable?

Thank you in advance.

[glin]

Hi, browsers collapse whitespace in HTML by default, so multiple spaces end up appearing as a single space. If you want to preserve whitespace, you can set the white-space: pre CSS property on your content:

# Preserve whitespace in the header
iris %>%
  reactable(
    columns = list(Sepal.Length = colDef(name = "Sepal    Length", headerStyle = list(whiteSpace = "pre")))
  )

# Or preserve whitespace in the entire table
iris %>%
  reactable(
    columns = list(Sepal.Length = colDef(name = "Sepal    Length")),
    style = list(whiteSpace = "pre")
  )

There are a few other ways to put multiple spaces in HTML without CSS (see https://blog.hubspot.com/website/html-space), but I like the CSS method for the flexibility.