Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sticky column group headers #107

Closed
moa-incom opened this issue Dec 16, 2020 · 3 comments
Closed

Sticky column group headers #107

moa-incom opened this issue Dec 16, 2020 · 3 comments

Comments

@moa-incom
Copy link

Hi.

Thank you for this wonderful package!

I'm having some trouble with fixing the column group header names when a certain height is chosen. See code below (you might have to view the actual table in a browser to see the problem)

reactable(
  iris[1:50, ],
  pagination = FALSE,
  sortable = FALSE,
  height = 600,
  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"))
  )
)

Is there a way to fix this issue? I want both the column group header name and the column name to stay fixed when scrolling down.

Thank you.

@glin
Copy link
Owner

glin commented Dec 20, 2020

Hi, unfortunately that's intended for now, sorry. I've looked into getting column group headers to stick before, but got stuck on limitations with the underlying table library (React Table). It might be possible to fix in the future though, so keep a look out.

@moa-incom
Copy link
Author

Ok. Fair enough. Thank you for your answer and again thanks for the good work with this package!
Do you (or anyone else reading this) know of any workarounds for this requested feature?

@glin
Copy link
Owner

glin commented Jan 10, 2021

This is now fixed in the development version (d9ac371). Both the column group headers and filter cells should be sticky now:

reactable(
  iris[1:50, ],
  pagination = FALSE,
  filterable = TRUE,
  bordered = TRUE,
  height = 300,
  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"))
  )
)

reactable output

@glin glin closed this as completed Jan 10, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants