How to search values in expandable rows?

[Camil88]

Hello, I'm using reactable to make a table in my shiny app. I added search bar to a table but it only works for main rows of that table. In case I have expandable rows it doesn't work. I want to search values also in expandable rows. Base on the example provided below - if you search for 'Front' word then rows which have it in nested/expandable rows should be filtered.

Please have a look at my short and workable example:

if (interactive()) {

library(shiny)
library(reactable)

data <- MASS::Cars93[, 1:5]
dataDetails <- MASS::Cars93[, c(1,6,9,10)]

MASS::Cars93

ui <- fluidPage(
  reactableOutput("table")
)

server <- function(input, output) {
 output$table <- renderReactable({
  reactable(
    data,
    searchable = TRUE,
    selection = "multiple",
    details = function(index){
      extraData <- subset(dataDetails, data[[1]] == dataDetails[[1]][index])
      htmltools::div(style = "padding: 16px",
                     reactable::reactable(extraData, outlined = TRUE))
    }
    
  )
})

}

shinyApp(ui, server)
}

I tried to add some js (expand rows automatically on keyup event in search bar, then search in expanded rows) but it didn't work for me, it was very slow.

[glin]

Hi, searching is supported for expandable rows, but you'll have to use true expandable rows (with groupBy grouping) instead of a nested table. When custom rendering a table within the row details, the main table isn't aware of any of the nested tables because they're all independent table widgets.

If you'd like to make this work, I think Crosstalk is your best bet for cross-widget linked filtering. I don't have an example of this on hand, but may have a few pointers..

1. You'll need to link the main table and all nested tables together using Crosstalk shared data objects with the same group. I remember an example of this from: https://github.com/glin/reactable/issues/57
2. Once you have the main table and all nested tables linked to the same dataset, you'll need a Crosstalk search filter. Crosstalk doesn't provide a text search filter, but you could make your own custom filter. There's an example of this in the Popular Movies demo: https://glin.github.io/reactable/articles/popular-movies/popular-movies.html

[Camil88]

Thank you for your answer. In fact, I used groupBy since I couldn't do anything better in this case and yes, it makes searching throught exapanded rows possible. However, I'd like to use nested table and search through it so I'll take a look at issue #57, this eexample looks really nice and maybe it will solve my problem.