opt_interactive with fmt_markdown renders an empty pane

[francoisluc]

Prework

• Read and agree to the code of conduct and contributing guidelines.
• If there is already a relevant issue, whether open or closed, comment on the existing thread instead of posting a new issue.

Description

When I only opt_interactive, the gt table shows in rstudio viewer pane (and quarto html). If I add the function fmt_markdown, the viewer pane is blank and the output in the quarto document is also empty.

My VM runs rstudio Pro and all packages are up to date.

Reproducible example

• Post a minimal reproducible example so the maintainer can troubleshoot the problems you identify. A reproducible example is:
  • Runnable: post enough R code and data so any onlooker can create the error on their own computer.
  • Minimal: reduce runtime wherever possible and remove complicated details that are irrelevant to the issue at hand.
  • Readable: format your code according to the tidyverse style guide.

gt(iris) |> 
  fmt_markdown(c("Sepal.Length")) |> 
  opt_interactive()

Expected result

Session info

Rstudio version

R version 4.4.1 (2024-06-14)
Platform: x86_64-pc-linux-gnu
Running under: Ubuntu 22.04.4 LTS

Matrix products: default
BLAS:   /usr/lib/x86_64-linux-gnu/openblas-pthread/libblas.so.3 
LAPACK: /usr/lib/x86_64-linux-gnu/openblas-pthread/libopenblasp-r0.3.20.so;  LAPACK version 3.10.0

locale:
 [1] LC_CTYPE=C.UTF-8       LC_NUMERIC=C          
 [3] LC_TIME=C.UTF-8        LC_COLLATE=C.UTF-8    
 [5] LC_MONETARY=C.UTF-8    LC_MESSAGES=C.UTF-8   
 [7] LC_PAPER=C.UTF-8       LC_NAME=C             
 [9] LC_ADDRESS=C           LC_TELEPHONE=C        
[11] LC_MEASUREMENT=C.UTF-8 LC_IDENTIFICATION=C   

time zone: America/Montreal
tzcode source: system (glibc)

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

other attached packages:
[1] gt_0.11.0

loaded via a namespace (and not attached):
 [1] vctrs_0.6.5       cli_3.6.3        
 [3] xfun_0.46         rlang_1.1.4      
 [5] generics_0.1.3    jsonlite_1.8.8   
 [7] glue_1.7.0        openssl_2.2.0    
 [9] askpass_1.2.0     markdown_1.13    
[11] htmltools_0.5.8.1 vabene_1.0.10    
[13] reactR_0.6.0      sys_3.4.2        
[15] sass_0.4.9        fansi_1.0.6      
[17] crosstalk_1.2.1   tibble_3.2.1     
[19] fastmap_1.2.0     yaml_2.3.10      
[21] lifecycle_1.0.4   compiler_4.4.1   
[23] dplyr_1.1.4       htmlwidgets_1.6.4
[25] pkgconfig_2.0.3   rstudioapi_0.16.0
[27] digest_0.6.36     R6_2.5.1         
[29] tidyselect_1.2.1  utf8_1.2.4       
[31] pillar_1.9.0      curl_5.2.1       
[33] commonmark_1.9.1  credentials_2.0.1
[35] magrittr_2.0.3    tools_4.4.1      
[37] withr_3.0.1       reactable_0.4.4  
[39] xml2_1.3.6      

Thanks for checking that issue.

[olivroy]

I can't reproduce the issue on Windows R 4.3.2. Can you reproduce it with plain reactable output? reactable::reactable(mtcars)?

[francoisluc]

Hi, reactable::reactable(mtcars) outputs the table in the viewer pane. As well as gt(mtcars) |> opt_interactive() will output. The problem is when I add fmt_markdown, the table disappear. I can see there is a table when I inspect the source code of the web page, the height is 0px

[olivroy]

Thanks for the investigation!

I don't know what happens for "auto" to be badly calculated like this.. Luckily for you, this is why I added the height parameter to interactive tables in gt 0.11 #1723

gt(iris) |> 
  fmt_markdown(c("Sepal.Length")) |> 
  opt_interactive(height = px(600))

Should work in the meantime.

When there are some bugs like this, I typically adding things like this in my Rprofile

# workaround rstudio/gt#1835
opt_interactive2 <- function(data, ...) {
  gt::opt_interactive(data, ..., height = gt::px(680))
}

So that when I call the function in the console, I can do it like so:

gt(iris) |> 
  fmt_markdown(c("Sepal.Length")) |> 
  opt_interactive2()

[francoisluc]

Unfortunately, the workaround does not produce any output. What I saw is that the div with class "reactable html-widget html-widget-static-bound" is empty when I use fmt_markdown. Could it be a dependency of gt that causes the problem?

[francoisluc]

Another finding that might ring a bell for you. In the "console" of google chrome inspector, there is an error when I run the line in RStudio. I hope it helps.

[olivroy]

I just noticed this code added in #1629 @obsaditelnost can you explain what this does and why you added this? Thanks

gt/inst/css/gt_styles_default.scss

Lines 439 to 441 in a52eb41

	div.Reactable > div.rt-table > div.rt-thead > div.rt-tr.rt-tr-group-header > div.rt-th-group:after {
	height: 0px !important;
	}

[obsaditelnost]

I just noticed this code added in #1629 @obsaditelnost can you explain what this does and why you added this? Thanks

gt/inst/css/gt_styles_default.scss

Lines 439 to 441 in a52eb41

	div.Reactable > div.rt-table > div.rt-thead > div.rt-tr.rt-tr-group-header > div.rt-th-group:after {
	height: 0px !important;
	}

The reactable.css sets ".rt-th-group:after" to a 1px solid grey 'area' acting as a border. Together with gt's explicit "border-bottom" style definition of ".rt-th-group" it looks off, especially if you define another border colour:

If we revert the synthetic colgroup-border from reactable.css (by just setting it is 0px) we have more freedom to apply the previously defined gt-styles (even though many of them are not yet supported for interactive tables)

[obsaditelnost]

@francoisluc did you try to run your reprex in a plain R-Terminal without using RStudio? If this works, the versions of RStudio and R might be incompatible somehow, just like here: rstudio/rstudio#14603

[francoisluc]

Hi, I finally found the issue. I was able to render in VS Code but not when I render a quarto document. I render the same document on my windows machine (not up to date) where the fmt_markdown works and compare it to the same document rendered in ubuntu. I found out that the document on ubuntu uses <script src="test2_files/libs/reactwidget-2.0.0/react-tools.umd.cjs"></script> but the document in windows uses <script src="test_files/libs/reactwidget-1.0.0/react-tools.js"></script>. I made a quick search and found out this was changed in reactR 0.6.0. When I downgraded to 0.5.0, the html renders correctly. Is there any changes you need to perform in gt so that it renders correctly?

[olivroy]

Thanks for the investigation!

It may be a reactR / reactable issue : glin/reactable#388 react-R/reactR#86

[francoisluc]

Thank you, I will follow those issues.

[olivroy]

reactR 0.6.1 released. This should be fixed!