Search code examples
rshinyreactable

How to hide radio buttons in reactable in shiny


How can I remove the column of radio buttons from a reactable table in my Shiny app, but keeping the selection = "single" argument?

My reprex is based on this solution to hiding the all/none checkbox with selection = "multiple", I was hoping that I could do something similar to remove the radio buttons.

table

app.R:

library(shiny)
library(reactable)

ui <- fluidPage(
  includeCSS("hide_radio.css"),
  titlePanel("Hide radio buttons"),
  mainPanel(reactableOutput("table"))
)

server <- function(input, output) {
    output$table <- renderReactable({
      reactable(
        mtcars,
        selection = "single",
        columns = list(
          .selection = colDef(
            headerStyle = list(pointerEvents = "none")
          )
        ),
        theme = reactableTheme(
        headerStyle = list("& input[type='checkbox']" = list(display = "none"))
        )
      )
    })
}

shinyApp(ui = ui, server = server)

hide_radio.css:

.hide-checkbox {
  pointer-events: none;
}

.hide-checkbox input[type='checkbox'] {
  display: none;
}

Solution

  • Edit: If you want to hide the entire column (not only the elements) there is a much simpler way:

    library(shiny)
    library(reactable)
    
    ui <- fluidPage(
      titlePanel("Hide radio buttons"),
      mainPanel(reactableOutput("table"))
    )
    
    server <- function(input, output) {
      output$table <- renderReactable({
        reactable(
          mtcars,
          selection = "single",
          columns = list(
            # mpg  = colDef(show = FALSE),
            .selection = colDef(show = FALSE)
          )
        )
      })
    }
    
    shinyApp(ui = ui, server = server)
    

    However, this procedure needs to be adapted once the underlying react table library is updated in the R package:

    The column property show is deprecated. Use initialstate.hiddenColumns instead.

    Check: https://github.com/tannerlinsley/react-table/issues/1804


    Initial answer: Please check the following:

    library(shiny)
    library(reactable)
    
    ui <- fluidPage(
      tags$head(
        tags$style(
          HTML("
                .hide-checkbox {
                  pointer-events: none;
                }
                .hide-checkbox input[type=checkbox], input[type=radio] {
                  display: none !important;
                }
               ")
        )
      ),
      titlePanel("Hide radio buttons"),
      mainPanel(reactableOutput("table"))
    )
    
    server <- function(input, output) {
      output$table <- renderReactable({
        reactable(
          mtcars,
          selection = "single",
          columns = list(
            .selection = colDef(
              headerClass = "hide-checkbox"
            )
          )
        )
      })
    }
    
    shinyApp(ui = ui, server = server)