rreactable

Can I use `reactable` with groupBy and span several columns?

My data set has only two columns, but with rather some rather long strings. For example,

library(lorem) # for test data

dat <- data.frame(
    group=c( # 2 groups
        rep(as.character(lorem::ipsum(1)), 3), 
        rep(as.character(lorem::ipsum(1)), 3)
    ), 
    item=as.character(lorem::ipsum(6))
)

I want to display the data using reactable. I want to use groupBy to group the data. However, there is quite a lot of whitespace since the columns are shown side by side.

library(reactable)
reactable::reactable(
    dat,
    groupBy="group",
    compact=TRUE # no visible change IMO
)

screenshot

Is there a way to make both the group column and the item column span both columns, maybe using custom rendering?

I tried wrap=TRUE but then information is lost. I also tried to provide a details function which displays the items as separate reactable, but then the search functionality is lost.

What I would like to achieve is something like this:

aim

Solution

  • Just for reference, this is the solution I worked out, with the help of this answer and the docs

    reactable::reactable(
    dat,
    groupBy="group",
    columns = list(
        group=reactable::colDef(
            name= " ",
            width=25, #px
            grouped = htmlwidgets::JS("function(cellInfo) {
                return ' '
            }")
        ),
        item=reactable::colDef(
            name = "Group / Item",
            aggregate = htmlwidgets::JS("function(values, rows) {
                return rows[0]['group'] + ' (' + rows.length + ')'
            }")
        )
    )
)

    result