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 columns with highlighting #141

Closed
py9mrg opened this issue Apr 9, 2021 · 4 comments
Closed

Sticky columns with highlighting #141

py9mrg opened this issue Apr 9, 2021 · 4 comments

Comments

@py9mrg
Copy link

py9mrg commented Apr 9, 2021

Hello,

When making a table that uses sticky columns and highlighting, the required background colour of the sticky highlighting column prevents the highlighting for that column:

library(reactable)

test_tbl <- tibble::tibble(a = 1:3, b = 4:6, c = c(7:8, "hello"), d = c("hello", 11, 12), e = c(13, "hello", 15), f = rep("hello", 3))

make_sticky <- colDef(
  style = list(position = "sticky", left = 0, background = "#fff", zIndex = 1),
  headerStyle = list(position = "sticky", left = 0, background = "#fff", zIndex = 1)
)

reactable(test_tbl, highlight = TRUE, width = "300px",
          columns = list(
            b = make_sticky
          )
)

Created on 2021-04-09 by the reprex package (v2.0.0)

That code generates the following:

image

Notice the sticky column isn't highlighted, is there any way around that?

@glin
Copy link
Owner

glin commented Apr 24, 2021

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
)

reactable output

@py9mrg
Copy link
Author

py9mrg commented Apr 26, 2021

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!

@glin
Copy link
Owner

glin commented Jul 31, 2021

Sticky columns are now a built-in feature, so you shouldn't have to use this hack in the next version of reactable.

  • Sticky columns are now supported using a new sticky argument in colDef() and colGroup() (#19, #72, #141).

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)
)

@py9mrg
Copy link
Author

py9mrg commented Aug 2, 2021

@glin That's tremendous, thank you.

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