Search code examples
javascriptshinyradio-buttondt

Rshiny Radio button in several DT table


I need to insert radio buttons in a shiny DT datable application. I took inspiration from here (inst/examples/DT-radio/app.R) to do it.
However, for my case, I have several tables (not just one) and I can't manage them. What I want is to get all the radio buttons selected in table 1 and all the radio buttons selected in table 2. When I select a cell in the first row of table 1, and then a cell in the first row of table 2, the cell in the first table is no longer selected. Moreover, I get the selected cells for table 1 but not for table 2.

library(shiny)
library(DT)
shinyApp(
 ui = fluidPage(
title = 'Radio buttons in a table',
DT::dataTableOutput('un'),
tags$br(),
tags$br(),
tags$br(),

DT::dataTableOutput('deux'),

tags$br(),
tags$br(),
tags$br(),
verbatimTextOutput('sel')
),


server = function(input, output, session) {
# first table construction ------------------
m1 = matrix(
  as.character(1:3), nrow = 3, ncol = 3, byrow = TRUE,
  dimnames = list(month.abb[1:3], LETTERS[1:3])
)
for (i in seq_len(nrow(m1))) {
  m1[i, ] = sprintf('<input type="radio" name="%s" value="%s"/>', month.abb[i], m1[i, ])
}
# -------------------------------------------


# second table construction ------------------
m2 = matrix(
  as.character(1:5), nrow = 5, ncol = 3, byrow = TRUE,
  dimnames = list(c("julie", "sophie", "patricia", "carole", "therese"), LETTERS[1:3])
)
for (i in seq_len(nrow(m2))) {
  m2[i, ] = sprintf('<input type="radio" name="%s" value="%s"/>', month.abb[i], m2[i, ])
}
# -------------------------------------------


# overall row names for 2 table
overall = c(month.abb[1:3], c("julie", "sophie", "patricia", "carole", "therese"))


# First table-------------------------------
output$un = DT::renderDataTable(
  m1, escape = FALSE, selection = 'none', server = FALSE,
  options = list(dom = 't', paging = FALSE, ordering = FALSE),
  callback = JS("table.rows().every(function(i, tab, row) {
      var $this = $(this.node());
      $this.attr('id', this.data()[0]);
      $this.addClass('shiny-input-radiogroup');
    });
    Shiny.unbindAll(table.table().node());
    Shiny.bindAll(table.table().node());")
)
# -------------------------------------------


# Second table --------------------------------
output$deux = DT::renderDataTable(
  m2, escape = FALSE, selection = 'none', server = FALSE,
  options = list(dom = 't', paging = FALSE, ordering = FALSE),
  callback = JS("table.rows().every(function(i, tab, row) {
      var $this = $(this.node());
      $this.attr('id', this.data()[0]);
      $this.addClass('shiny-input-radiogroup');
    });
    Shiny.unbindAll(table.table().node());
    Shiny.bindAll(table.table().node());")
)
# -------------------------------------------



output$sel = renderPrint({
  str(sapply(overall, function(i) input[[i]]))
})


})

Thanks


Solution

  • You may have a typo. Try this

    # second table construction ------------------
    m2 = matrix(
      as.character(1:5), nrow = 5, ncol = 3, byrow = TRUE,
      dimnames = list(mynames, LETTERS[1:3])
    )
    mynames <- c("julie", "sophie", "patricia", "carole", "therese")
    for (i in seq_len(nrow(m2))) {
      m2[i, ] = sprintf('<input type="radio" name="%s" value="%s"/>', mynames[i], m2[i, ])
    }