I need to create a table with reactable for my shiny app witch should contain a lot of math formula (in row and column), so unfortunately mathjax isn't really an option because of its client-side-rendering behaviour.

Let's say I have the following MRE:

ui <- fluidPage(
  useShinyjs(),
  tags$head(
    tags$link(
      rel = "stylesheet",
      href = "https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css",
      integrity = "sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ",
      crossorigin = "anonymous"),
    HTML('<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>'),
    HTML('<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>'),
    HTML('<script>
          document.addEventListener("DOMContentLoaded", function(){
          renderMathInElement(document.body, {
          delimiters: [{left: "$", right: "$", display: false}]
          });})
         </script>'
    )
  ),
  
  reactableOutput("dftest")
)
col1 <- c(1,2,3,4,5)
col2 <- c(6,7,8,9,10)
df <- data.frame(col1,col2)

server <- function(session, input, output) {
  output$dftest <- renderReactable({
    reactable(
      df,
      onClick = "expand",
      details = function(index) {
        if (index <= length(absH)) {
          navs_pill(
            nav("tab1",
                div(
                  tags$p(paste0("$x_i = ", col1[index], " * x^2 * \\bar{x}$")))
            ),
            nav("tab2",
                div(
                  tags$p(paste0("$y_i = ", col2[index], " * \\Delta x_i$"))))
          )
        }
      })
  })
}

shinyApp(ui, server)

If I create a table with htmlOutput, renderUI and kableExtra, the following renders everything perfect:

tagList(
      HTML(kable_styling(tab_khf1, bootstrap_options = c("striped", "hover"))),
      tags$script(HTML(
        'renderMathInElement(document.getElementById("khf1Tbl1"), {delimiters: [{left: "$", right: "$", display: false}]});'))
    )

I have tried to the same with reactable but could not achieve it properly.

Add the class "math" to the p elements containing some math expressions. And add this script in the header:

$(document).ready(function() {
  $("body").on("click", "button", function() {
    var mathElements = document.getElementsByClassName("math");
    for(var i = 0; i < mathElements.length; i++) {
      renderMathInElement(
        mathElements[i], 
        {delimiters: [{left: "$", right: "$", display: false}]}
      );
    }
  });
});

EDIT

For the table headers:

    reactable(
      df,
      onClick = "expand",
      details = function(index) {
        if (index <= 4) {
          navs_pill(
            nav("tab1",
                div(
                  tags$p(paste0("$x_i = ", col1[index], " * x^2 * \\bar{x}$")))
            ),
            nav("tab2",
                div(
                  tags$p(paste0("$y_i = ", col2[index], " * \\Delta x_i$"))))
          )
        }
      }) |> htmlwidgets::onRender(
        'function(el) {
          renderMathInElement(el, {
            delimiters: [{left: "$", right: "$", display: false}]
          });
        }'
      )