CODEWITHSUNDEEP
rshinyreactable
FilipW
FilipW

Reputation: 1535

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)

Upvotes: 1

Views: 77

Answers (1)

MrFlick
MrFlick

Reputation: 206496

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")
      )
    )
  })
  
}
``

Upvotes: 2

Related Questions