`resizable = TRUE` removes the break in the underline between adjacent colGroups

[wvictor14]

The underline underneath colGroups gets extended such that there is no "break" between adjacent colGroups, making it difficult to discern between adjacent colGroups

resizable = FALSE (default)

reactable(
    iris,
    columns = list(
        Sepal.Length = colDef(name = "Length"),
        Sepal.Width = colDef(name = "Width"),
        Petal.Length = colDef(name = "Length"),
        Petal.Width = colDef(name = "Width")
    ),
    columnGroups = list(
        colGroup(name = "Sepal", columns = c("Sepal.Length", "Sepal.Width")),
        colGroup(name = "Petal", columns = c("Petal.Length", "Petal.Width"))
    )
)

resizable = TRUE

reactable::reactable(
    iris,
    resizable = TRUE,
    columns = list(
        Sepal.Length = colDef(name = "Length"),
        Sepal.Width = colDef(name = "Width"),
        Petal.Length = colDef(name = "Length"),
        Petal.Width = colDef(name = "Width")
    ),
    columnGroups = list(
        colGroup(name = "Sepal", columns = c("Sepal.Length", "Sepal.Width")),
        colGroup(name = "Petal", columns = c("Petal.Length", "Petal.Width"))
    )
)

I am not good with CSS, so could not figure out how to reintroduce the underline, which I thought would be something to the effect of modifying "margin" and/or "bottom-border" using the headerStyle argument of colGroup.

[glin]

Good catch, I knew about some spacing inconsistencies with the column group headers before, but never noticed the spacing was fully extended on resizable tables. This is a weird one to fix because column group headers don't use real borders like regular headers do. The borders are faked in order to achieve that spacing in between groups, with this CSS:

.rt-th-group::after {
  /* Custom borders with spacing */
  content: '';
  position: absolute;
  margin: auto;
  left: 8px;
  right: 8px;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: hsl(0, 0%, 90%);
}

The problem was the width: 100% CSS, combined with resizable headers actually extending outside of their bounds for a larger resize mouse target. Removing width: 100% seems to fix this, but it'll probably need more testing on browsers to be sure. I don't remember if there was a specific reason the width was set like that.

If you want to try this, here's a branch that can be installed for now: https://github.com/glin/reactable/compare/fix-group-borders?expand=1

remotes::install_github("glin/reactable@fix-group-borders")

[wvictor14]

Thanks for this!