How to change the row selection checkbox icon from "tick mark" to "xmark" in reactable?

Question

I would like to change checkbox icon for row selection from "tick mark" to "xmark" on reactable in shiny. Not sure how to do this. Here is my attempt:

library(shiny)
library(reactable)
library(shinyWidgets)
ui <- fluidPage(
  titlePanel("row selection example"),
  reactableOutput("table"),
  verbatimTextOutput("selected")
)

server <- function(input, output, session) {
  selected <- reactive(getReactableState("table", "selected"))
  
  output$table <- renderReactable({
    reactable(iris, selection = "multiple", onClick = "select",
              columns = list(
                .selection = colDef(
                  sticky = "left",
                  cell = function (value,index) prettyCheckbox(inputId=paste0("cb",index),
                                                               label="",
                                                               value = FALSE,
                                                               icon = icon('times')))
              )

              )
  })
  

  
  observe({
    print(iris[selected(), ])
  })
}

shinyApp(ui, server)

score 2 · Accepted Answer · answered Dec 02 '22 at 22:31

Use following CSS:

library(shiny)
library(reactable)
library(shinyWidgets)
ui <- fluidPage(
    titlePanel("row selection example"),
    reactableOutput("table"),
    verbatimTextOutput("selected"),
    tags$style(
        '
        .rt-table input[type="checkbox"]:checked:after {
            content: "X";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            background-color: #4399f3;
            color: white;
            width: 15px;
            height: 15px;
            text-align: center;
            font-weight: 900;
            border-radius: 3px;
        }
        '
    )
)

server <- function(input, output, session) {
    selected <- reactive(getReactableState("table", "selected"))
    
    output$table <- renderReactable({
        reactable(iris, selection = "multiple", onClick = "select",
                  columns = list(
                      .selection = colDef(
                          sticky = "left",
                          cell = function (value,index) prettyCheckbox(inputId=paste0("cb",index),
                                                                       label="",
                                                                       value = FALSE,
                                                                       icon = icon('times')))
                  )
                  
        )
    })
    
    
    
    observe({
        print(iris[selected(), ])
    })
}

shinyApp(ui, server)

A trick is used here. :after content with X inside overlaps on the original box when checked.

How to change the row selection checkbox icon from "tick mark" to "xmark" in reactable?

1 Answers1