How to implement expand/collapse rows in HTML table - r

Question

I would like to make some rows expand on click, i.e. by clicking on the arrow. Is there a way in reactable to add java script code to specific rows? There exists and option for expanding/collapsing all rows on click in reactable (see here), but it does not do exactly what I need. Is there any reactable/js guru out there who has an idea how this might be feasible.
The examples are designed in kableExtra but I think my problem is more suited for reactable.
df_open <- tibble::tibble(
Category = c("Fruits ▼︎", "Apple", "Banana",
"Kiwi", "Vegetable ▼︎", "Carrots ▼︎", "Red Carrots", "Orange Carrots", "Diary"),
Value_sum = c(1:9),
Value_one = c(10:18),
Value_two = c(200:208)
)
df_closed <- tibble::tibble(
Category = c("Fruits ▶&#xFE0E","Vegetable ▶︎", "Diary"),
Value_sum = c(1, 5,9),
Value_one = c(10,14,18),
Value_two = c(200, 204,208)
)
library(kableExtra)
# all collapsed, everything shown
kbl(df_open, escape = FALSE) |>
kable_styling(bootstrap_options = "bordered") |>
row_spec(row = c(2:4, 6), extra_css = "padding-left:30px;") |>
row_spec(row = c(7,8), extra_css = "padding-left:50px")
Completely unfolded table:
# all closed
kbl(df_closed, escape = FALSE) |>
kable_styling(bootstrap_options = "bordered")
Completely folded table:
Raw Data:
df <- tibble::tibble(
Category = c("Fruits", "Apple", "Banana", "Kiwi", "Vegetable", "Carrots", "Red Carrots", "Orange Carrots", "Diary"),
Value_sum = c(1:9),
Value_one = c(10:18),
Value_two = c(200:208),
Another_column = "ABC"
)
My attempt:
library(reactable)
df <- tibble::tibble(
Category = c("Fruits", "Fruits", "Fruits", "Fruits", "Vegetable", "Vegetable", "Vegetable", "Vegetable", "Diary"),
Category2 = c("", "Apple", "Banana", "Kiwi", "", "Carrots", "Red Carrots", "Orange Carrots", "Diary"),
Value_sum = c(1:9),
Value_one = c(10:18),
Value_two = c(200:208),
Another_column = "ABC"
)
reactable(
df,
groupBy = "Category",
defaultPageSize = 5,
elementId = "fruits-table"
)
)