Change font color in Shiny tableOutput

shiny
1

What is the easiest way to change the font color of a single row dataframe with tableOutput. Specifically, how to change the "7" under "Right" to green.

I posted this in SO and it was suggested I use DT. However, my table is quite small, 4 items, 2 rows. I tried DT and it brought up many elements that I do not want including:

Show entries <10>;, Search box, Small up/down arrows next to column names, Row name, "Showing 1 to 1 of 1 entries" and Previous/Next with button?

Is there a simpler way to just change the color of the text in one cell in a DT. If not, is it possible to remove all of these unwanted features of DT?

library(shiny)

shinyApp(
  ui = fluidPage(

    sidebarLayout(
      sidebarPanel(
      fluidRow(  
         tableOutput("view")
        )
      ),

      mainPanel(
      ))),

  server = function(input, output, session){

    correct <- reactiveValues(num = 7)
    wrong <- reactiveValues(num = 4)   
    skipped <- reactiveValues(num = 9)

    togo = 80

    output$view <- renderTable(tibble(
      Right = correct$num,
      Wrong = wrong$num,
      Skipped = skipped$num,
      ToGo = togo
    ), spacing = "xs")
  }
)
2

I think it is possible to remove all those things from DT, looking at the options page: https://rstudio.github.io/DT/options.html

Considering the nature of the data though -- that it seems like you'd only ever have one row -- could it make more sense to use bootstrap elements instead? Here's an example:

library(shiny)

shinyApp(
  ui = fluidPage(
    sidebarLayout(
      sidebarPanel(
        fluidRow(
          column(3, tags$strong("Right")),
          column(3, tags$strong("Wrong")),
          column(3, tags$strong("Skipped")),
          column(3, tags$strong("ToGo"))
        ),
        fluidRow(
          column(3, span(style = "color:green;font-weight:bold;", textOutput("right"))),
          column(3, textOutput("wrong")),
          column(3, textOutput("skipped")),
          column(3, textOutput("togo"))
        )
    ),
    
    mainPanel(
      
    )
  )
  ),
  
  server = function(input, output, session) {
    correct <- reactiveValues(num = 7)
    wrong <- reactiveValues(num = 4)
    skipped <- reactiveValues(num = 9)
    
    togo = 80
    
    output$right <- renderText(correct$num)
    output$wrong <- renderText(wrong$num)
    output$skipped <- renderText(skipped$num)
    output$togo <- renderText(togo)
  }
)
1 Like
3

I knew there must be a simpler way. Thank-you for pointing it out to me and for your super clear code.

2 Likes