0

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;
}
tauft
  • 546
  • 4
  • 13

1 Answers1

1

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)
ismirsehregal
  • 30,045
  • 5
  • 31
  • 78