-
Notifications
You must be signed in to change notification settings - Fork 80
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 columns with highlighting #141
Comments
Hi, that's a good question. I experimented with this a bit and couldn't figure out a great way to do this. The problem is tricky because row highlighting styles the row, while sticky columns style the cell. The cell background takes precedence over the row background, so you either need a sticky style that's aware of row highlighting, or a row highlighting that styles cells instead of rows. Ultimately this has to be solved in the library, and it's a good catch to keep in mind for whenever reactable adds proper sticky column support. If you're fine with using a hack that relies on undocumented CSS and could break in any future release, here's a proof of concept that changes row highlighting to style cells instead, using a theme. # Proof-of-concept of using row highlighting with sticky columns.
# WARNING: This relies on undocumented CSS classes and is not guaranteed
# to work in a future release. Last tested with reactable 0.2.3.
sticky_style <- function(left = TRUE) {
style <- list(position = "sticky", background = "#fff", zIndex = 1)
if (left) {
style <- c(style, list(left = 0, borderRight = "1px solid #eee"))
} else {
style <- c(style, list(right = 0, borderLeft = "1px solid #eee"))
}
style
}
sticky_theme <- reactableTheme(
cellStyle = list(
".rt-tr-highlight:hover &" = list(backgroundColor = "hsl(0, 0%, 95%) !important")
)
)
reactable(
MASS::Cars93,
columns = list(
Manufacturer = colDef(
style = sticky_style(),
headerStyle = sticky_style()
),
Make = colDef(
style = sticky_style(left = FALSE),
headerStyle = sticky_style(left = FALSE)
)
),
defaultColDef = colDef(minWidth = 150),
highlight = TRUE,
theme = sticky_theme
) |
Hello @glin tanks very much for that, works perfectly for me and I'll make sure to use renv when using these together to protect it from breakages. I hadn't realised sticky columns was extra you implemented and not something provided by the react table library itself - my JS is non-existent so it's not clear to me what the reactable package is doing and what's the react table library - so I really appreciate the effort you put in to add it. In fact the same can be said for all reactable package in general which I really love for how many features it has to make my life easier! |
Sticky columns are now a built-in feature, so you shouldn't have to use this hack in the next version of reactable. With the dev version of reactable, row highlighting should work just fine with sticky columns: reactable(
MASS::Cars93,
columns = list(
Manufacturer = colDef(
sticky = "left",
style = list(borderRight = "1px solid #eee"),
headerStyle = list(borderRight = "1px solid #eee")
),
Make = colDef(
sticky = "right",
style = list(borderLeft = "1px solid #eee"),
headerStyle = list(borderLeft = "1px solid #eee")
)
),
highlight = TRUE,
defaultColDef = colDef(minWidth = 150)
) |
@glin That's tremendous, thank you. |
Hello,
When making a table that uses sticky columns and highlighting, the required background colour of the sticky
highlightingcolumn prevents the highlighting for that column:Created on 2021-04-09 by the reprex package (v2.0.0)
That code generates the following:
Notice the sticky column isn't highlighted, is there any way around that?
The text was updated successfully, but these errors were encountered: