How can I make a new (pop up) window appear when clicking on the row in a table?

I created a reactable Table 1, which has one extra table (Table 2 - actually there are many tables, because it filters by Manufacturer == sales_by_mfr$Manufacturer[index])) inside it when clicking on the row (expandable row).

library(reactable)
data <- MASS::Cars93[18:47, ] %>%
  mutate(ID = as.character(18:47), Date = seq(as.Date("2019-01-01"), by = "day", length.out = 30)) %>%
  select(ID, Date, Manufacturer, Model, Type, Price)

sales_by_mfr <- group_by(data, Manufacturer) %>%
  summarize(Quantity = n(), Sales = sum(Price))

reactable(
  sales_by_mfr,
#part for Table 2
  details = function(index) {
    sales <- filter(data, Manufacturer == sales_by_mfr$Manufacturer[index]) %>% select(-Manufacturer)
    tbl <- reactable(sales, outlined = TRUE, highlight = TRUE, fullWidth = FALSE)
    htmltools::div(style = list(margin = "12px 45px"), tbl)
  },
#End of Table 2
  onClick = "expand",
  rowStyle = list(cursor = "pointer")
)

I want that Table 2 to be appeared in new windows. I.E. if I click on Manufacturer == "Ford" row then opens up a window with a Table 2, at the same time when I click on Manufacturer == "Dodge" row then a new window with Table 2 appears (at the same time not closing a window where Manufacturer == "Ford")

I tried something like this, however, it does not work in the way I wanted.


reactable(
  sales_by_mfr,
  columns = list(
    # Render a "show details" button in the last column of the table.
    # This button won't do anything by itself, but will trigger the custom
    # click action on the column.
    details = colDef(
      name = "",
      sortable = FALSE,
      cell = function() htmltools::tags$button("Show details")
    )
  ),
  onClick = JS("function(rowInfo, colInfo) {
    // Only handle click events on the 'details' column
    if (colInfo.id !== 'details') {
      return
    }

    // Display an alert dialog with details for the row
    window.alert('Details for row ' + rowInfo.index + ':\\n' + JSON.stringify(rowInfo.row, null, 2))

    // Send the click event to Shiny, which will be available in input$show_details
    // Note that the row index starts at 0 in JavaScript, so we add 1
    if (window.Shiny) {
      Shiny.setInputValue('show_details', { index: rowInfo.index + 1 }, { priority: 'event' })
    }
  }")
)

This topic was automatically closed 54 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.