reactable icon indicating copy to clipboard operation
reactable copied to clipboard

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

Open bbt-dev opened this issue 4 years ago • 2 comments

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

bbt-dev avatar Oct 20 '21 14:10 bbt-dev

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?

glin avatar Oct 23 '21 21:10 glin

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?

bbt-dev avatar Oct 24 '21 09:10 bbt-dev