Interaction button / table

shiny
#1

Dear Shiny community,

I'm currently working on the implementation of a code to generate pdf report via LaTeX from Shiny. The LaTeX code as well as the knitr compilation on Rstudio are fine, only the Shiny part is new for me.

For this reason, I do not have any minimal example to provide since I do not know from where to start. However, following several searches on this topic, I could not find a proper solution so here is a kind of minimal example:

  1. Starting from a table of red and green cells as below case 1 on the Shiny app ;

  2. When clicking on a red cell, the symbol in it would change from '+' to 'o' and the cell would become green (Same behavior when clicking on a green cell, turning red then) as in case 2:

1

  1. Finally, a single variable, for example the sum of all '+' on the table is interactively updated when the cell is clicked so that I can use it in the pdf. As an example in the first case the variable is 6 but would become 4 in the case 2.

Now the question:

How to obtain such responsive table on Shiny (Layout + behavior) ? And how to extract data from it (0 or 1) to use it in calculations ?

I would only need a minimal example with few rows and columns so that I can then create the rest and share the results if anyone is interested.

Thank you in advance for any piece of advice,

Jb

0 Likes

#2

I do not know how to do this with buttons. Below is a rough example using check boxes. I expect it is not good enough to meet your needs but perhaps it can get you started.

library(shiny)

ui <- fluidPage(
   
   titlePanel("Table"),
   
   fluidRow(
     column(style = "background-color: skyblue; border-style:solid; 
            border-color: white;", width = 1, HTML('<div>-</div>')),
     column(style = "background-color: skyblue; border-style:solid; 
            border-color: white;", width = 1, HTML('<div>A</div>')),
     column(style = "background-color: skyblue; border-style:solid; 
            border-color: white;", width = 1, HTML('<div>B</div>')),
     column(style = "background-color: skyblue; border-style:solid; 
            border-color: white;", width = 1, HTML('<div>C</div>'))
   ),
   fluidRow(
     column(width = 1, style = "background-color: skyblue; 
            border-style:solid ; border-color: white;", HTML('<div>1</div>')),
     column(width = 1, uiOutput("B1out"), checkboxInput("B1", label = NULL)),
     column(width = 1, uiOutput("B2out"), checkboxInput("B2", label = NULL)),
     column(width = 1, uiOutput("B3out"), checkboxInput("B3", label = NULL))
   ),
   fluidRow(
     column(width = 1, style = "background-color: skyblue; 
            border-style:solid ; border-color: white;", HTML('<div>2</div>')),
     column(width = 1, uiOutput("B4out"), checkboxInput("B4", label = NULL)),
     column(width = 1, uiOutput("B5out"), checkboxInput("B5", label = NULL)),
     column(width = 1, uiOutput("B6out"), checkboxInput("B6", label = NULL))
    ),
    fluidRow(
      column(12, uiOutput("Count"))
    )
)

server <- function(input, output) {
  output$B1out <- renderUI(if(input$B1) {
    HTML("<span style=background-color:red;>___+___</span>")
  } else HTML("<span style=background-color:green;>___o___</span>"))
   
   output$B2out <- renderUI(if(input$B2) {
     HTML("<span style=background-color:red;>___+___</span>")
   } else HTML("<span style=background-color:green;>___o___</span>"))
   
   output$B3out <- renderUI(if(input$B3) {
     HTML("<span style=background-color:red;>___+___</span>")
   } else HTML("<span style=background-color:green;>___o___</span>"))
   
   output$B4out <- renderUI(if(input$B4) {
     HTML("<span style=background-color:red;>___+___</span>")
   } else HTML("<span style=background-color:green;>___o___</span>"))
   
   output$B5out <- renderUI(if(input$B5) {
     HTML("<span style=background-color:red;>___+___</span>")
   } else HTML("<span style=background-color:green;>___o___</span>"))
   
   output$B6out <- renderUI(if(input$B6) {
     HTML("<span style=background-color:red;>___+___</span>")
   } else HTML("<span style=background-color:green;>___o___</span>"))
   
   Count <- reactive(input$B1 + input$B2 + input$B3 + input$B4 + input$B5 + input$B6)
   output$Count <- renderUI(tags$span(paste("Number of boxes checked = ", Count())))
  
   
}

# Run the application 
shinyApp(ui = ui, server = server)
0 Likes

#3

Hi FJCC,

Your answer fits perfectly what I was looking for :slight_smile:, it is more than a good starting point and the check boxes are also a good option.

Thanks a lot for this output and I will let you know if I manage to find a way to implement the buttons.

Have a nice day,

Regards,

Jb

0 Likes