How I can sticky a column group?

[Jorge-hercas]

Hello, good morning and thanks for reading. First I would like to thank you for creating this wonderful package, as it has been very useful to me.

I've been working on a table and would like to pin all the columns in a column group, but trying this only pins the title of the column group and the first column, is there a way to pin all the columns in the group?

The code im using is the following:

library(dplyr)
library(reactable)

iris |> 
  mutate(
    a = 1,b = 1,c = 1,d = 1, e = 1, f = 1
  ) |> 
  reactable(
    columnGroups = list(
      colGroup(name = "Sepal", columns = c("Sepal.Length", "Sepal.Width"),
               headerStyle = list(position = "sticky", left = 0,zIndex = 1,
                                  background = "#fff")
               )
    ), columns = list(
      "Sepal.Length" = colDef(style = list(position = "sticky", left = 0,zIndex = 1,background = "#fff"),
                              headerStyle = list(position = "sticky", left = 0,zIndex = 1,background = "#fff")),
      "Sepal.Width" = colDef(style = list(position = "sticky", left = 0,zIndex = 1,background = "#fff"),
                             headerStyle = list(position = "sticky", left = 0,zIndex = 1,background = "#fff"))
    )
  )

Thanks a lot for the help

[glin]

Hi, the short answer is to upgrade to reactable 0.3.0 (released very recently) and use the new built-in sticky columns feature, which works for column groups. See Sticky column groups for an example - you can remove all the custom styles and just add colGroup(..., sticky = "left") now.