rshinyreactable

Change color of selected row in reactable


I have this Shiny app that displays a large table with reactable. I want to change the appearance so that the selected row gets a different color than the rest of the table. The code below works. However, rowStyle seem to trigger a re-rendering of the table each time I select a row. Is there a way highlight the row selected without re-rendering the table?

library(shiny)
library(reactable)
library(nycflights13)
library(dplyr)

ui <- fluidPage(
  reactableOutput("table"),
  verbatimTextOutput("selectedRowsText")
)

server <- function(input, output, session) {
  data <- nycflights13::flights |> filter(month == 1)
  
  selected <- reactive(getReactableState("table", "selected"))
  
  output$table <- renderReactable({
    reactable(
      data,
      selection = "multiple",
      onClick = "select",
      rowStyle = function(index) {
        if (index %in% selected()) {
          list(backgroundColor = "#c0d6e4", color = "#000")
        }
      }
    )
  })
  
}

shinyApp(ui, server)


Solution

  • Instead, use the reactableTheme to update the styling.

    server <- function(input, output, session) {
      data <- nycflights13::flights |> filter(month == 1)
      
      selected <- reactive(getReactableState("table", "selected"))
      
      output$table <- renderReactable({
        reactable(
          data,
          selection = "multiple",
          onClick = "select",
          theme = reactableTheme(
            rowSelectedStyle=list(backgroundColor = "#c0d6e4", color = "#000")
          )
        )
      })
      
    }
    ``