glin / reactable

Interactive data tables for R
https://glin.github.io/reactable
Other
632 stars 80 forks source link

Popover alert when max number of checkboxes checked #79

Open ixodid198 opened 4 years ago

ixodid198 commented 4 years ago

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)
glin commented 4 years ago

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.

malcolmbarrett commented 1 year ago

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