Can details take both row and column argument ?

[statquant]

Hello, looking at the doumentation I see in
?reactable

details: Additional content to display when expanding a row. An R function that takes the row index and column name as arguments, or a ‘JS()’ function that takes a row info object as an argument. Can also be a ‘colDef()’ to customize the details expander column.

However when I try to pass 2 arguments the second argument is worth ".details", is that expected ?

data <- unique(CO2[, c("Plant", "Type")])
reactable(data, details = function(index, column) {
  browser()
  plant_data <- CO2[CO2$Plant == data$Plant[index], ]
  htmltools::div(style = "padding: 1rem",
    reactable(plant_data, outlined = TRUE)
  )
})

What I am hoping to achieve is a table where each cell would contain a table itelf.
FYI each cell within a column would contain a table with a fixed set of columns but different number of rows.

[glin]

Yes, the second argument of the R function is the column name. For the default details column, that's actually a built-in column named .details which you can ignore. If you want to add row details to every cell, you can use the default column definition:

reactable(
  MASS::Cars93,
  defaultColDef = colDef(
    details = function(index, column) {
      paste(index, column)
    }
  )
)

Then use the row index and column name to determine what to render within that cell's row details.

[statquant]

It's amazing, it works perfectly !
If I take the bellow simple example, is it possible to "render" each cell only within the limits of the column as opposed to allowing the sub-table to be rendered on the entire width of the table ?

library(data.table)                                                           
data <- setDT(copy(MASS::Cars93))                                             
data <- data[, list(c1 = list(.SD[,1:4]), c2 = list(.SD[,5:10])),Manufacturer]
reactable(                                                                    
  data,                                                                       
  defaultColDef = colDef(                                                     
    details = function(index, column) {                                       
        if(column != "Manufacturer")                                          
          reactable(data[index,get(column)][[1]],                             
          bordered = TRUE, highlight = TRUE                                   
          )                                                                   
    }                                                                         
  ),                                                                          
  bordered = TRUE, highlight = TRUE, filterable = TRUE                        
)   

If this was possible you could even be thinking of being able to render several cells on the same row simultaneously (which does not seem to be possible right now)

[glin]

It's not possible, and today you'd have to manually limit and position the nested content. The only way to include those nested rows in the table, but it's going to be hard if the nested table doesn't share the same columns, even if we had the "tree table" feature where you could add arbitrary nested rows.