I am trying to create an interactive table for my R shiny app where the user can drill down into a table by clicking on the rows, I am able to do this using Reactable. The first level works fine however when i try to add a nested table inside another nested table i.e user can expand to a second level and then a third level of detail, the returned rows arent correct as the index it appears to be using is from the first outer table. Is there a way to create a 3 level nested table in reactable or another R package?
Code below
# table structure is three levels so that when user clicks on higher level a sub table renders and then another subtable - allows user to drill down from table group to table to individual cells - could in theory add a 4th level for sheets?
# first level of table - id allows the function to map between the levels - the columns included are return name and table group along with a count of the tables per that grouping
data_level_1 <- rv$filtered_data %>%
mutate("level_1_id" = paste0(`Return Name`, `Table Group`))%>%
distinct(level_1_id, `Return Name`, `Table Group`,`Table`)%>%
count(level_1_id, `Return Name`, `Table Group`, name = "Number of Tables")
# second level of table - id allows the function to map between the levels - the columns included are table along with a count of the cells per table
data_level_2 <- rv$filtered_data %>%
mutate("level_1_id" = paste0(`Return Name`, `Table Group`))%>%
mutate("level_2_id" = paste0(`Return Name`, `Table Group`,`Table`))%>%
select(-c(`Return Name`, `Table Group`))%>%
count(level_1_id,level_2_id,`Table`, name = "Number of Cells")
# third level of table - id allows the function to map between the levels - the columns included are cell, row label, column label and cell label with a count of the cells per table
data_level_3 <- rv$filtered_data %>%
mutate(level_2_id = paste0(`Return Name`, `Table Group`,`Table`))%>%
select(-c(`Return Name`, `Table Group`,`Table`))%>%
select(level_2_id,`Cell`, `Row Label`,`Column Label`, `Cell Label`)
# create the table using reactable package - works by basically creating a table and then within the details creating another table and so on also defining the styling and col names
reactable(data_level_1,
columns = list("level_1_id"= colDef(show = T),
"Return Name" = colDef(name = "Return Name"),
"Table Group"= colDef(name = "Table Group"),
"Number of Tables" = colDef(name = "Number of Tables")),
defaultPageSize = 5,
theme = table_styling,
highlight = T,
bordered = T,
defaultColDef = colDef(headerStyle = list(background = header_background,
color = header_text)),
details = function(index){
sec_lvl = data_level_2[data_level_2$`level_1_id` == data_level_1$`level_1_id`[index], ]
reactable(data = sec_lvl,
columns = list("level_1_id" = colDef(show = T),
"level_2_id" = colDef(show = T),
"Table" = colDef(name = "Table"),
"Number of Cells" = colDef(name = "Number of Cells")),
defaultPageSize = 5,
theme = table_styling,
highlight = T,
bordered = T,
defaultColDef = colDef(headerStyle = list(background = header_background,
color = header_text)),
details = function(index2){
third_lvl = data_level_3[data_level_3$`level_2_id` == data_level_2$`level_2_id`[index2], ]
reactable(data = third_lvl,
columns = list("level_2_id" = colDef(show = T),
"Cell"= colDef(name = "Cell"),
"Row Label"= colDef(name = "Row Label"),
"Column Label"= colDef(name = "Column Label"),
"Cell Label"= colDef(name = "Cell Label")),
defaultPageSize = 5,
theme = table_styling,
highlight = T,
bordered = T,
defaultColDef = colDef(headerStyle = list(background = header_background,
color = header_text)))
})
})
Not really sure where to start with this as cant see any examples online with a nested table inside another nested table, any help would be appreciated.