I'm currently developing a shiny app that incorporates a gt table.
I want to make the text bold in the .gt_group_heading class if it's capitalized.
It appears that any text passed to this element is treated as plain text within the td tag and not recognized as HTML.
My idea was to use Javascript to modify the appearance of the text. However, I'm facing an issue when running the app - I encounter the following error:
Uncaught TypeError: Cannot read property 'innerHTML' of null
at (index):22
Interestingly, when I run the app and input the JavaScript directly into the browser console, I can successfully display capitalized text in bold.
Could it be something specific to shiny causing the code to malfunction? It seems like the code needs to execute after the GT table is created, hence the null error message. How can I ensure the correct sequence of events in shiny?
Just for your information, I've attempted to wrap the strings in df$name with HTML tags, but it doesn't render correctly. For example, the following approach did not work:
`df$name <- mutate(df$name, paste("<b>", df$name, "</b>"))`
Any guidance or assistance would be greatly appreciated. Below is a snippet of my code.
library(tidyverse)
library(gt)
library(shiny)
df <- tibble(
name = c("john", "john", "jerry", "jerry", "jack", "jack", "jim", "jim"),
day = c("wed", "wed", "thurs", "thurs", "mon", "mon", "tues", "tues"),
lotto = c(12, 42, 24, 57, 234, 556, 34, 23),
car = c("chevy", "toyota", "honda", "gmc", "tesla", "nissan", "ford", "jeep")
) %>%
mutate(name = toupper(name))
options(gt.row_group.sep = "\n")
ui <- fluidPage(
gt_output("table"),
tags$script(
HTML(
"
var heading = document.querySelector('#one > table > tbody > tr > td');
var html = heading.innerHTML;
html = html.replace(/(\b[A-Z]{2,}\b)/g,'<strong>$1</strong>');
heading.innerHTML = html;
"
)
)
server <- function(input, output, session){
output$table <- render_gt(
df %>%
arrange(lotto) %>%
gt(
id = "one",
groupname_col = c("name", "day"),
rownames_to_stub = TRUE,
row_group.sep = getOption("gt.row_group.sep", "\n")
) %>%
opt_css(
css = "
#one .gt_group_heading {
white-space:pre-wrap;
word-wrap:break-word;
}
"
)
)
}
shinyApp(ui, server)