reactable icon indicating copy to clipboard operation
reactable copied to clipboard

Popover alert when max number of checkboxes checked

Open ixodid198 opened this issue 5 years ago • 2 comments

With the option, selection = "multiple" multiple checkboxes appear in a Reactable table. If I programmatically restrict the number of boxes that can be checked it would be ideal if a little alert bubble appears next to the mouse to the tell user why their selection was not accepted. I understand that there are modal alert windows that can be used. However, I believe that they are too intrusive for this use.

bsplus has a button popover that is similar to what I am thinking.

Screen Shot 2020-09-14 at 8 59 20 PM

Is this possible to do with checkboxes in a Reactable table without being a Javascript wizard?

Here is code that only accepts a maximum of three checkboxes.

# Demonstrate popover when max check boxes reached
# See: https://ijlyttle.shinyapps.io/tooltip_popover_modal/_w_8a89c681/#

library("shiny")
library("reactable")
library("bsplus")

ui <- fluidPage(
  reactableOutput("table"),
  verbatimTextOutput("table_state"),
  
  use_bs_popover() 
)
server <- function(input, output, session) {
  output$table <- renderReactable({
    reactable(
      iris,
      showPageSizeOptions = TRUE,
      selection = "multiple"
    )
  }) 
  
  output$table_state <- renderPrint({
    state <- req(getReactableState("table"))
   
    # Get vector of which boxes are checked (their number)
    boxes_checked <- state[[4]]
  
    # Show which boxes are checked
    print(boxes_checked)
    
    # Restrict number of checked boxes
    num_boxes_checked <- (length(boxes_checked))
    
    if (num_boxes_checked > 3) {
       updateReactable("table", selected = boxes_checked[1:num_boxes_checked - 1])
    }
  })

}
shinyApp(ui, server)

ixodid198 avatar Sep 15 '20 01:09 ixodid198

I think ideally, the table would disable all other checkboxes once 3 of them are checked. That would be the least awkward and most accessible way to restrict selection IMO. This is not possible today, but it's interesting to consider for the future.

Otherwise, I can't think of a good way to show a tooltip on a checkbox cell. Selection cells don't support custom rendering, and I can only think of a very bad hack to programmatically insert a tooltip in them. I'd suggest exploring other ways to indicate this in the UI for now. Like instead of an intrusive modal, perhaps some error alert box that appears above the table when selection has been restricted. Or displaying a message that warns the user about the selection limit before they even interact with the table.

glin avatar Sep 19 '20 18:09 glin

@glin a few years on, is it still not possible to disable the other checkboxes when a maximum number of rows has been selected?

malcolmbarrett avatar Oct 17 '23 18:10 malcolmbarrett