glin
Problems with rendering of LaTex equations after table interaction
Hello, first of all I really want to thank you for maintaining this great package. I recently switched from DT to reactable.
I have one column in my reactable table, where some cells have latex equations as text in it. When opening the html table, those cells are rendered as expected. But after interacting with the table (column filters, sorting), some of the latex cells are not rendered anymore as you can see on this screenshot:
I tried it also with providing a function added to the cell argument of colDef() that adds the $$ before and after the string, but same same problem. Any thoughts on this? Thanks!
Hi, can you provide a minimal, reproducible example? I'm not familiar with the use of LaTeX in HTML documents.
My guess though is that this is similar to other issues with external JavaScript libraries where some code must be run to render the LaTeX (https://github.com/glin/reactable/issues/55). There's some script that initializes the LaTeX on page load, but any new LaTeX that appears (e.g., through a data table page change or rendered from some Shiny dynamic UI) doesn't get automatically initialized. Rendering the LaTeX via an htmlwidget or Shiny output would solve this, but I doubt this is the case..
Does the LaTeX rendering work with DT or other sorts of dynamic UI like Shiny's uiOutput()? Can you post a minimal example of those as well if possible?
Hi, thanks for the quick reply. Here is a reprex:
library(reactable)
library(dplyr)
#>
#> Attache Paket: 'dplyr'
#> The following objects are masked from 'package:stats':
#>
#> filter, lag
#> The following objects are masked from 'package:base':
#>
#> intersect, setdiff, setequal, union
data <- iris %>%
as_tibble() %>%
mutate(
latex = rep_len(
c("$$frac{m}{s}$$", "$$m_equ$$", "unknown"), length.out = n()),
.before = 1
)
Created on 2022-07-06 by the reprex package (v2.0.1)
Then do
data %>% reactable(filterable = TRUE)
When you now sort the table or use the column filters, the text of some cells in the column latex is shown as plain text and not as latex math equations.
Thanks for the reprex, that clears things up. So R Markdown's HTML documents come with a MathJax script that renders all LaTeX in the document on the initial page load. After that, any new LaTeX equations that get dynamically loaded on the page are left unrendered because the MathJax script only ever runs once. I can reproduce this with other HTML widgets that dynamically load content, like DT (when you change pages, LaTeX on subsequent pages aren't rendered).
I think this is more like a general limitation with LaTeX rendering in R Markdown and not really specific to reactable. If there was a way to manually render LaTeX with MathJax, we could potentially work around this problem, but I don't see a way to do that with the version of MathJax that R Markdown ships. The MathJax docs have a page on using MathJax in Dynamic Content:
If you are writing a dynamic web page where content containing mathematics may appear after MathJax has already typeset the rest of the page, then you will need to tell MathJax to look for mathematics in the page again when that new content is produced. To do that, you need to use the
MathJax.typeset()method. This will cause MathJax to look for unprocessed mathematics on the page and typeset it, leaving unchanged any math that has already been typeset.
But this MathJax.typeset() method doesn't exist on an R Markdown page, so it probably requires a newer version of MathJax.
So unfortunately, I don't have a good solution or workaround for this problem, and don't know enough about LaTeX/MathJax to find one. If there was an HTML widget for LaTeX rendering, that would work well with reactable or other dynamic UI in the Shiny/htmlwidgets world, but I don't think that exists.
KaTeX might be helpful. I would be happy to create a simple demo with or without use of htmlwidgets.
From a very long time ago, I created a simple widget https://github.com/timelyportfolio/katexR with the post now at https://buildingwidgets.com/week05/.
@timelyportfolio Thanks for the info, I didn't know about KaTeX. I tried out katexR and it works great, works outside of R Markdown as well. Here's my example Rmd file, although I couldn't get the $$..$$ syntax to work with KaTeX, which has a display mode/inline mode option to do the same thing maybe?
```{r}
library(reactable)
library(dplyr)
library(katexR)
data <- iris %>%
as_tibble() %>%
mutate(
latex = rep_len(
c("\\frac{m}{s}", "m_equ", "unknown"), length.out = n()),
.before = 1
)
reactable(
data,
filterable = TRUE,
columns = list(
latex = colDef(cell = function(value) {
# Omit inline = TRUE to render math in display mode
katex(value, inline = TRUE)
})
)
)
```
```{css, echo=FALSE}
/* Remove unnecessary bottom margin that R Markdown adds to HTML widgets */
.katexR {
margin-bottom: 0;
}
```
R Markdown documents add unnecessary whitespace to the bottom of HTML widgets, so I also overrode that with custom CSS to make the tables look better. And then optionally, you can exclude MathJax from the Rmd doc since it's not used anymore:
output:
html_document:
mathjax: null
I also stumbled upon this newer katex package, which is published on CRAN, but requires more setup since it only generates raw HTML. You have to manually include the KaTeX CSS in the document, but it doesn't need any JavaScript since all the LaTeX rendering is done up front.
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" data-external="1">
```{r}
library(reactable)
library(dplyr)
library(katex)
data <- iris %>%
as_tibble() %>%
mutate(
latex = rep_len(
c("\\frac{m}{s}", "m_equ", "unknown"), length.out = n()),
.before = 1
)
reactable(
data,
filterable = TRUE,
columns = list(
latex = colDef(
cell = function(value) {
# Omit displayMode = FALSE to render math in display mode
katex_html(value, displayMode = FALSE)
},
html = TRUE
)
)
)
```