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' })
}
}")
)