Using the Reactable R package, is there a way to created a nested table inside a nested table?

83 Views Asked by At

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.

0

There are 0 best solutions below