Feature request: global button to expand/collapse folded row data

[mattwarkentin]

Hi,

First off, let me just say that this package is amazing! It is now my de facto standard for creating HTML tables in R. You can get so much mileage with so little code. It really is fantastic.

I was wondering how tricky it would be to have a button, perhaps above the table, that globally expands or collapses foldable row data? I love the capacity to nest row data with groupBy and details, but sometimes it would be nice to reset the table to entirely expanded or collapsed rows. I did see you added the defaultExpanded arg in #23 for when you first open the HTML doc. This feature would have a similar purpose, but would allow dynamic interaction with folded rows after you have already started interacting with the table.

Thanks for the package!

[mattwarkentin]

Perhaps arguments like reactable(collapsible = TRUE/FALSE, expandable = TRUE/FALSE)? I'm just thinking out loud. Maybe only one arg would suffice.

[glin]

Hi, thanks for the suggestion. For tables in Shiny apps, you could use the recently added updateReactable() to expand or collapse rows like in this example app: https://glin.github.io/reactable/articles/examples.html#update-a-reactable-instance

Otherwise, I've been thinking about custom action buttons that can manipulate the table (e.g. export data: #11), and this would be another great use case for that.

[mattwarkentin]

Hi @glin,

Thanks for sharing that link. I updated my package and ran that code and the functionality of the Expand Rows/Collapse Rows button is great! Hoping it is possible to port that type of functionality over to a static HTML document with the action buttons you mentioned. Exporting data would be great too, no doubt.

Thanks for all of your great work.

[januz]

I am in the process of exploring (and falling in love with) reactable. Thanks so much for the package!

I was wondering the same thing, i.e., whether there is an easy way to enable expanding/collapsing all nested rows in a static HTML document. Is this possible without using Shiny?

[glin]

This is now possible to do in static HTML documents in the development version (0.2.3.9000), using the new JavaScript API:

• New JavaScript API to manipulate or access tables from JavaScript. Use this to create custom interactive controls, such as CSV download buttons, custom filter inputs, or toggle buttons for row grouping and row expansion (#11, #28, #182, #194). Learn more in the JavaScript API guide or the JavaScript API examples.

There's no built-in expand/collapse toggle button, but the code to implement one using the JavaScript API isn't too much. Here's an example of it in the docs: https://glin.github.io/reactable/articles/examples.html#row-expansion-toggle-button

library(reactable)
library(htmltools)

data <- MASS::Cars93[1:5, c("Manufacturer", "Model", "Type", "Price")]

htmltools::browsable(
  tagList(
    tags$button(
      "Expand/collapse all",
      onclick = "Reactable.toggleAllRowsExpanded('cars-expansion-table')"
    ),

    reactable(
      data,
      groupBy = "Manufacturer",
      defaultPageSize = 5,
      elementId = "cars-expansion-table"
    )
  )
)

If you wanted to reuse this expand/collapse button, you could put it in a function:

library(reactable)
library(htmltools)

expandToggleButton <- function(tableId, label = "Expand/collapse all") {
  htmltools::tags$button(
    label,
    onclick = sprintf("Reactable.toggleAllRowsExpanded('%s')", tableId)
  )
}

data <- MASS::Cars93[1:5, c("Manufacturer", "Model", "Type", "Price")]

htmltools::browsable(
  tagList(
    expandToggleButton("cars-expansion-table"),
    
    reactable(
      data,
      groupBy = "Manufacturer",
      defaultPageSize = 5,
      elementId = "cars-expansion-table"
    )
  )
)

reactable may eventually provide a built-in expand/collapse toggle button, but I think that's a harder problem. For now, the JavaScript API gives you the flexibility to implement a toggle button and style it however you want.

There's a more detailed write-up of how to use the JavaScript API in the JavaScript API guide.

[januz]

Fantastic! Thanks so much