How can one include Js code for rendering KaTeX by reactable in R Shiny?

4 min read 05-10-2024

How can one include Js code for rendering KaTeX by reactable in R Shiny?

Rendering KaTeX in R Shiny with Reactable: A Step-by-Step Guide

R Shiny is a powerful framework for building interactive web applications. When it comes to displaying mathematical equations, KaTeX shines with its speed and beautiful rendering. But integrating KaTeX into your Shiny applications can be tricky. This article will guide you through the process of seamlessly rendering KaTeX equations within Reactable tables in your Shiny app.

The Challenge: Displaying KaTeX in Reactable

Imagine building a Shiny app that presents a table of scientific data. You want to include mathematical formulas within the table itself. Reactable is a great choice for creating highly customizable and responsive tables, but it doesn't natively handle KaTeX rendering. This is where a bit of JavaScript magic comes in.

Setting the Stage: Our R Shiny Code

Let's start with a basic R Shiny example:

library(shiny)
library(reactable)

ui <- fluidPage(
  reactableOutput("myTable")
)

server <- function(input, output) {
  output$myTable <- renderReactable({
    reactable(
      data = data.frame(
        formula = c("$\\frac{1}{2}x^2{{content}}quot;, "$\\sqrt{a^2 + b^2}{{content}}quot;),
        value = c(10, 20)
      ),
      columns = list(
        formula = colDef(name = "Formula")
      )
    )
  })
}

shinyApp(ui, server)

In this code, we define a simple table with two columns: "formula" and "value." The formula column contains KaTeX code, but it's just displayed as plain text – not rendered as a beautiful mathematical equation.

The Solution: Injecting JavaScript for KaTeX Rendering

To render KaTeX within the Reactable table, we'll need to inject JavaScript code that:

Loads the KaTeX library: Include the KaTeX library files in our Shiny app.
Identifies and renders KaTeX code: Find all elements containing KaTeX code and convert them into rendered equations.

Here's how we achieve this:

Include KaTeX:

Add the following code to the ui section of your Shiny app:

ui <- fluidPage(
  # ... other UI elements
  tags$head(
    tags$link(rel = "stylesheet", href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css", integrity = "sha384-vKruj+K9//PM9M7z7R0i+wLw+nYgtCTrpu7LKY0G/0L72Z+Yo//+6G8YveG+1O8g", crossorigin = "anonymous"),
    tags$script(src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js", integrity = "sha384-PBR23VGJhQh/x89tCw0uYLd+MpodAlvG8hIxC+ZnQz1tar/7u+l/x9GbkJ2O+w", crossorigin = "anonymous"),
    tags$script(src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js", integrity = "sha384-+XBljX+xo8pHuLjth4k75GXsVyyOtvB/6/gK/rL40H/zhvJMD69VV8bi+q0G/l", crossorigin = "anonymous")
  ),
  reactableOutput("myTable")
)

This adds the KaTeX stylesheet and JavaScript files to your app.

Render KaTeX:

Add the following code to the server section of your Shiny app:

server <- function(input, output) {
  output$myTable <- renderReactable({
    reactable(
      # ... your table data and columns definitions
      onRender = JS(
        "function(element) {
          renderMathInElement(element, {
            delimiters: [
              {left: '$', right: '$', display: true},
              {left: '{{content}}#39;, right: '{{content}}#39;, display: false}
            ]
          });
        }"
      )
    )
  })
}

This onRender function executes JavaScript code after the Reactable table has been rendered in the browser. The renderMathInElement function from KaTeX automatically finds elements containing KaTeX code and renders them as mathematical equations.

Important Considerations

KaTeX Delimiters: The renderMathInElement function uses delimiters to identify KaTeX code within your table cells. In the above example, we've configured it to recognize both single dollar signs ($) for inline equations and double dollar signs ($) for displayed equations.
KaTeX Version: Make sure you're using compatible versions of Reactable, KaTeX, and any other JavaScript libraries involved.

Example: A Shiny App with Reactable and KaTeX

Here's a complete example showing how to use this solution in a simple R Shiny app:

library(shiny)
library(reactable)

ui <- fluidPage(
  tags$head(
    tags$link(rel = "stylesheet", href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css", integrity = "sha384-vKruj+K9//PM9M7z7R0i+wLw+nYgtCTrpu7LKY0G/0L72Z+Yo//+6G8YveG+1O8g", crossorigin = "anonymous"),
    tags$script(src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js", integrity = "sha384-PBR23VGJhQh/x89tCw0uYLd+MpodAlvG8hIxC+ZnQz1tar/7u+l/x9GbkJ2O+w", crossorigin = "anonymous"),
    tags$script(src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js", integrity = "sha384-+XBljX+xo8pHuLjth4k75GXsVyyOtvB/6/gK/rL40H/zhvJMD69VV8bi+q0G/l", crossorigin = "anonymous")
  ),
  reactableOutput("myTable")
)

server <- function(input, output) {
  output$myTable <- renderReactable({
    reactable(
      data = data.frame(
        formula = c("$\\frac{1}{2}x^2{{content}}quot;, "$\\sqrt{a^2 + b^2}{{content}}quot;),
        value = c(10, 20)
      ),
      columns = list(
        formula = colDef(name = "Formula")
      ),
      onRender = JS(
        "function(element) {
          renderMathInElement(element, {
            delimiters: [
              {left: '$', right: '$', display: true},
              {left: '{{content}}#39;, right: '{{content}}#39;, display: false}
            ]
          });
        }"
      )
    )
  })
}

shinyApp(ui, server)

Run this code in R, and you'll see a Shiny app displaying a table with nicely rendered KaTeX equations!

Conclusion

By combining the power of R Shiny, Reactable, and KaTeX, you can now easily create stunning and interactive tables that seamlessly display complex mathematical equations. This approach allows you to build engaging and informative dashboards and web applications that cater to both visual and mathematical needs.