search

glin / reactable

Interactive data tables for R
https://glin.github.io/reactable
Other
613 stars 79 forks source link

footer with a sparkline superimposes the last row when the pagination = FALSE and height is fixed #205

Open bbt-dev opened 2 years ago

bbt-dev commented 2 years ago

First of all, thanks a lot for developing and maintaining the reactable package!

I've found a bug that appears when the pagination = FALSE and height is fixed. In this case the footer with a sparkline superimposes the last row of the data, and the last row is not visible.

Here is a reproducable example: As you could see, the data have 6 rows (identifiable by the ID column), but the footer sparkline superimposes over the 6ths row, and only first five rows are visible.

a <- sleep[1:6, ]
a$extra[a$extra == -1.6] <- NA
reactable(a, pagination = FALSE, height = 200,
 columns = list(
  extra = colDef(
    style = function(value) {
      if (is.na(value)) {
        color <- "#000000"
      }else if (value > 0) {
        color <- "#008000"
      } else if (value < 0) {
        color <- "#e00000"
      } else {
        color <- "#777"
      }
      list(color = color, fontWeight = "bold")
    },
    footer = function(values)  {
        sparkline(values, type = "bar", chartRangeMin = min((a$extra)), chartRangeMax = max(a$extra))
    }
  )
))
glin commented 2 years ago

Nice find, that is so bizarre. I can't reproduce the issue in Chrome/Edge/IE11, but can reproduce it in Firefox.

In Chrome, the last row shows up for me when scrolled to the bottom: reactable output in Chrome. The last row is visible when scrolled to the bottom.

In Firefox, the last row is hidden behind the sticky footer: reactable output in Firefox. The last row is hidden when scrolled to the bottom.

It also reproduces with any footer in general, not just a footer with a sparkline. This feels like a browser bug with sticky elements in Firefox, possibly also related to an interaction with flexbox. I'll do some digging, but I think this will be really tricky to research and fix, and may not be fixed for a while.

Do you also see this issue in Firefox? Or if not, which browser are you using?

bbt-dev commented 2 years ago

Thanks for digging into this bug. Yes, I also see this in Firefox. Has just checked in Opera - there everything is fine.

May be it is better to inform about this issue the Firefox developers, and post a bug report at https://bugzilla.mozilla.org/home ? I have no idea how to describe this bug for them, it seems they would need some deep CSS/JS info but I have no idea about these details. What do you think about the bug report to Mozilla?