Shiny xtable rowcolor

[brucejames]

I want to render an xtable in Shiny (and not via DT or any other package), as it allows me to print it with a LaTeX look.

It works, except that I cannot color the top row using the add.to.row argument. The LaTeX code printed by xtable is correct, but somehow withMathJax does not seem to be able to process it.

Below is a reprex. Removing the two add.to.row lines allows rendering the app, but of course with no colored rows in the table.

Can someone help me? Thank you in advance.

library(shiny)
library(xtable)

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      numericInput("alpha", "Alpha:", 0), 
      numericInput("beta" , "Beta:" , 0)
    ), 
    mainPanel(
      uiOutput("tab")
    )
  )
)

server <- function(input, output, session) {
  output$tab <- renderUI({
    tab           <- data.frame(input$alpha, input$beta)
    colnames(tab) <- c("\\alpha", "\\beta")
    xtab          <- print(
      xtable(tab, align = rep("c", 3)),
      floating                   = FALSE,
      tabular.environment        = "array",
      print.results              = TRUE,
      sanitize.colnames.function = identity,
      include.rownames           = FALSE, 
      add.to.row                 = list(pos     = as.list(c(-1)), # this argument creates an error!
                                        command = rep("\\rowcolor[gray]{0.95}", length(c(-1))))
    )
    tagList(
      withMathJax(),
      HTML(paste0("$$", xtab, "$$"))
    )
  })
}

shinyApp(ui, server)

And here the LaTeX code showing that the LaTeX code generated by xtable above does work:

\documentclass{article}
\usepackage{color, colortbl}

\begin{document}

\[
\begin{array}{cc}
\rowcolor[gray]{0.75} \hline
\alpha & \beta \\ 
\hline
0 & 0 \\ 
\hline
\end{array}
\]

\end{document}

[saturne]

Hello,

The MathJax extension colortbl is required if you want to use \rowcolor. I have not been able to make it work using withMathJax(), but it works if you include the MathJax library from a cdn:

library(shiny)
library(xtable)

js <- "
window.MathJax = {
  loader: {load: ['[tex]/colortbl']},
  tex: {packages: {'[+]': ['colortbl']}}
};
"

ui <- fluidPage(
  tags$head(
    tags$script(async="", src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"),
    tags$script(HTML(js))
  ),
  sidebarLayout(
    sidebarPanel(
      numericInput("alpha", "Alpha:", 0), 
      numericInput("beta" , "Beta:" , 0)
    ), 
    mainPanel(
      uiOutput("tab")
    )
  )
)

server <- function(input, output, session) {
  output$tab <- renderUI({
    tab           <- data.frame(input$alpha, input$beta)
    colnames(tab) <- c("\\alpha", "\\beta")
    xtab          <- print(
      xtable(tab, align = rep("c", 3)),
      floating                   = FALSE,
      tabular.environment        = "array",
      print.results              = TRUE,
      sanitize.colnames.function = identity,
      include.rownames           = FALSE, 
      add.to.row                 = list(pos     = as.list(c(-1)), # this argument creates an error!
                                        command = rep("\\rowcolor[gray]{0.95}", length(c(-1))))
    )
    tagList(
      #withMathJax(),
      HTML(paste0("$$", xtab, "$$"))
    )
  })
}

shinyApp(ui, server)

[saturne]

The code above randomly works. The following one seems to work better:

library(shiny)
library(xtable)

js <- "
window.MathJax = {
  loader: {
    load: ['[tex]/colortbl']
  },
  tex: {
    displayMath: [['$$', '$$']],
    packages: {'[+]': ['colortbl']}
  }
};
"

ui <- fluidPage(
  tags$head(
  ),
  sidebarLayout(
    sidebarPanel(
      numericInput("alpha", "Alpha:", 0), 
      numericInput("beta" , "Beta:" , 0)
    ), 
    mainPanel(
      uiOutput("tab")
    )
  )
)

server <- function(input, output, session) {
  output[["tab"]] <- renderUI({
    tab           <- data.frame(input[["alpha"]], input[["beta"]])
    colnames(tab) <- c("\\alpha", "\\beta")
    xtab          <- print(
      xtable(tab, align = rep("c", 3)),
      floating                   = FALSE,
      tabular.environment        = "array",
      print.results              = TRUE,
      sanitize.colnames.function = identity,
      include.rownames           = FALSE, 
      add.to.row                 = list(
        pos     = as.list(-1),
        command = "\\rowcolor[gray]{0.95}"
      )
    )
    tagList(
      #withMathJax(),
      HTML(paste0("$$", xtab, "$$")),
      tags$script(HTML(js)),
      tags$script(
        async="", 
        src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
      )
    )
  })
}

shinyApp(ui, server)

[brucejames]

Thank you @saturne, this does work, thanks!
Only one thing missing: How to use my own defined color (from LaTeX's \definecolor)?