First row is overlap with columns name

[RamiKrispin]

Hello,

I updated recently from version 0.2.0 to 0.2.1 and I started to have an overlapping between the first row and the columns name when using the defaultPageSize. Here is a reproducible example:

library(ggplot2)
data("diamonds")

bar_chart <- function(label, width = "100%", height = "14px", fill = "#00bfc4", background = NULL) {
  bar <- htmltools::div(style = list(background = fill, width = width, height = height))
  chart <- htmltools::div(style = list(flexGrow = 1, marginLeft = "6px", background = background), bar)
  htmltools::div(style = list(display = "flex", alignItems = "center"), label, chart)
}

reactable::reactable(data = diamonds[1:200,],
                     # onClick = "select",
                     # selection = "single",
                     pagination = TRUE,
                     highlight = TRUE,
                     height = 400,
                     defaultSorted = "depth",
                     sortable = TRUE,
                     borderless = TRUE,
                     defaultPageSize = 20,
                     columns = list(
                       carat = reactable::colDef(name = "Carat",
                                                 minWidth = 130,
                                                 maxWidth = 250
                       ),
                       price = reactable::colDef(name = "Price",
                                                   minWidth = 100,
                                                   maxWidth = 170,
                                                   format = reactable::colFormat(separators = TRUE, digits = 2),
                                                   cell = function(value) {
                                                     
                                                     value <- round(value, digits = 1)
                                                     
                                                     width <- paste0(100 * abs(value) / max(diamonds$price), "%")
                                                     # Add thousands separators
                                                     value <- format(value, big.mark = ",", nsmall = 2)
                                                     bar_chart(value, width = width, fill = ifelse(value > 0, "#1f77b4", "red"))
                                                   },
                                                   align = "left")
                     ))

Output:

sessionInfo()

R version 3.6.0 (2019-04-26)
Platform: x86_64-apple-darwin15.6.0 (64-bit)
Running under: macOS  10.15.6

Matrix products: default
BLAS:   /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib
LAPACK: /Library/Frameworks/R.framework/Versions/3.6/Resources/lib/libRlapack.dylib

locale:
[1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] ggplot2_3.3.0

loaded via a namespace (and not attached):
 [1] rstudioapi_0.11   magrittr_1.5      tidyselect_1.1.0  munsell_0.5.0     colorspace_1.4-1 
 [6] R6_2.4.1          rlang_0.4.7       dplyr_1.0.2       tools_3.6.0       grid_3.6.0       
[11] packrat_0.5.0-20  gtable_0.3.0      withr_2.2.0       htmltools_0.5.0   crosstalk_1.1.0.1
[16] ellipsis_0.3.1    yaml_2.2.1        digest_0.6.25     tibble_3.0.1      lifecycle_0.2.0  
[21] crayon_1.3.4      purrr_0.3.3       htmlwidgets_1.5.1 vctrs_0.3.2       glue_1.4.1       
[26] reactR_0.4.2      compiler_3.6.0    pillar_1.4.4      generics_0.0.2    scales_1.1.1     
[31] jsonlite_1.6.1    reactable_0.2.1   pkgconfig_2.0.3  

Thanks,
Rami

[glin]

Oh nooo, this is a browser bug that already bit me once in #41 🤦. The bug affects older versions of Chrome and Safari, and probably all versions of the RStudio Viewer. I'll fix it over the weekend, but for now, you can work around it by including this CSS:

.rt-thead.-header, .rt-tfoot {
  flex-shrink: 0;
}

or reverting back to 0.2.0.

Thanks for reporting this.

[RamiKrispin]

Yes, I revert back to 0.2.0.

Thank you for this great package!

[glin]

This should now be fixed in the development version (feba305). I'll also try to get it on CRAN soon. Thanks again for reporting this.

[RamiKrispin]

Thanks!