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!

[glin]

Hi, I have thought about exposing the underlying JavaScript library and React component for use from JavaScript alone, but just never did it. It'd be a lot of extra effort to maintain and document for how little it'd be used. It could possibly be exposed and just not documented or supported though, with users accepting the risk if they really must use it.

I thought the table component was already exposed from window.Reactable, but apparently it isn't from checking just now. That'll require slight changes to the package I think. So for now, there's not a good way to do this, even in an unsupported way.

If the component does get exposed, you'd be able to call React directly like in this filter input example: https://glin.github.io/reactable/articles/custom-filtering.html#basic-custom-filter-input-react

Instead of 'input', it'd be something like React.createElement(window.Reactable.Reactable, { data: ..., ... }), and you'd supply the JavaScript equivalents to the reactable() arguments.

[krystian8207]

@glin thank you so much for the leads of the issue.
I've managed to successfully export the Reactable function at my fork: main...krystian8207:main

It works like a charm:

library(reactable)
mt_nested <- mtcars |> tidyr::nest(more = mpg:cyl, .by = am)
reactable(
  mt_nested, 
  columns = list(
    more = colDef(
      cell = JS(
        "function(cellInfo) {
          return cellInfo.value.cyl.length + ' entries';
        }"
      ),
      details = JS(
        r"(function(rowInfo, state) {
          return React.createElement(
            window.Reactable.Reactable, 
            { 
              data: rowInfo.values.more,
              columns: [{ "id": "mpg", "name": "mpg", "type": "numeric" }, { "id": "cyl", "name": "cyl", "type": "numeric" }]
            }
          );
        })"
      )
    )
  )
)

I'd love to have this functionality included in the official package.
Please let me know if I should make the PR with my changes if you like it (of course if it's correct implementation that suits you expectations).

[glin]

@krystian8207 Yep that looks good, feel free to PR it. Only request here is to omit it from the NEWS, because it's still completely unsupported with all the risks of breaking changes on package upgrades.

It might eventually affect https://github.com/machow/reactable-py though, so just going to note to myself to double check on that later.

[krystian8207]

@glin Thank you, I've just created the mentioned PR.