Is there a way to create nested reactable with JS?

[krystian8207]

Hi! Thank you for your hard work on this amazing and highly customizable package.

I'm currently working on a large table having multiple columns that store nested tibbles.
I want to display the nested columns as expandable cells.
For that goal I'm defining details argument of colDef as an R function that returns reactable object.

Here's the minimal example:

library(reactable)
mt_nested <- mtcars |> tidyr::nest(more = mpg:cyl, .by = am)
str(mt_nested)
#> tibble [2 × 2] (S3: tbl_df/tbl/data.frame)
#>  $ am  : num [1:2] 1 0
#>  $ more:List of 2
#>   ..$ : tibble [13 × 2] (S3: tbl_df/tbl/data.frame)
#>   .. ..$ mpg: num [1:13] 21 21 22.8 32.4 30.4 33.9 27.3 26 30.4 15.8 ...
#>   .. ..$ cyl: num [1:13] 6 6 4 4 4 4 4 4 4 8 ...
#>   ..$ : tibble [19 × 2] (S3: tbl_df/tbl/data.frame)
#>   .. ..$ mpg: num [1:19] 21.4 18.7 18.1 14.3 24.4 22.8 19.2 17.8 16.4 17.3 ...
#>   .. ..$ cyl: num [1:19] 6 8 6 8 4 4 6 6 8 8 ...

reactable(
  mt_nested, 
  columns = list(
    more = colDef(
      cell = JS(
        "function(cellInfo) {
          return cellInfo.value.cyl.length + ' entries';
        }"
      ),
      details = function(index) {
        htmltools::div(
          style = "padding: 1rem", 
          reactable(mt_nested$more[[index]])
        )
      }
    )
  )
)

The issue is defining details as an R function makes rendering the table a bit slow.
I wonder if there's a way to create nested reactable with defining details argument as a JS function?

Something like:

details = JS(
  "function(rowInfo, state) {
    renderReactable(rowInfo.values.more)
  }"
)

Thank you!