Enable filter in nested tables

[aditir30]

I'm trying to use Javascript API to setFilter on nested tables. The filter works on the parent table, but not on the child table (I'm trying to keep a track of a table schema per year, therefore year is my filter field). It works using Shiny, but I'm aiming to create a static page. I tried to implement something on the lines of https://github.com/glin/reactable/issues/225 but it doesn't seem to be working.

library(htmltools)
query_t_df <- data.frame(TABLE_NAME = c("Address", "Map", "Address", "Map"),
                           'TABLE FULL NAME' = c("Address", "Map", "Address", "Map"),
                           'TABLE DESCRIPTION'= c("Address", "Map", "Address", "Map"),
                           'COLUMN YEAR'= c("20062007","20062007","20072008","20072008"),
                           COLUMN_NAME = c("Name", "Zip Code","State","City"))
tst_tbl_group <- query_t_df %>% select( `TABLE NAME`,`TABLE FULL NAME`,`TABLE DESCRIPTION`, `COLUMN YEAR`) %>% distinct() %>% arrange(`TABLE NAME`)

htmltools::browsable(
  tagList(
    div(
      div(tags$label("Year", `for` = "year-filter")),
      tags$select(
        id = "year-filter",
        onchange = "Reactable.setFilter('year-filter-table', 'COLUMN YEAR', this.value), Reactable.setFilter('nested-table-1', 'COLUMN YEAR', this.value)",
        tags$option("Choose here", value = ""),
        lapply(unique(tst_tbl_group$`COLUMN YEAR`), tags$option)
      )
    ),

    tags$hr("aria-hidden" = "false"),

     reactable(tst_tbl_group,
               details = function(index) {
              cols <- filter(query_t_df, query_t_df$`TABLE NAME` == tst_tbl_group$`TABLE NAME`[index]) %>%select(`COLUMN NAME`, `COLUMN YEAR`)
            # this is the part where I want the filter to be applied as well. But the elementId is not working as expected.
            tbl <- reactable(cols,highlight = TRUE, striped = TRUE,outlined = TRUE, bordered = TRUE, 
style = list(fontSize = "12px", maxWidth = 350), elementId = paste0("nested-table-", index))
            htmltools::div(style = list(margin = "12px 45px",fontSize = "12px"), tbl)
            },
            defaultPageSize = 5, elementId = "year-filter-table")

  )
)

[glin]

I get several errors when trying to run your code, e.g.:

Error: Problem with `filter()` input `..1`.
i Input `..1` is `query_t_df$`TABLE NAME` == tst_tbl_group$`TABLE NAME`[index]`.
x Input `..1` must be of size 4 or 1, not size 0.

Could you create a minimal or reproducible example?

A skim of the code looks fine though. By "elementId is not working as expected", do you mean there are errors like "reactable instance not found" in the JavaScript console? I just realized that the example from https://github.com/glin/reactable/issues/225 doesn't handle the case where a nested table doesn't exist (and trying to search it fails), so that example could definitely be improved.