search

glin / reactable

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

Reactable version 3.0 adds extra spacing to existing reactable tables with the addition of .rt-td-inner to support vertical align #248

Closed jozilla closed 1 year ago

jozilla commented 2 years ago

After updating to reactable 0.3.0 from version 0.2.3, my tables suddenly seemed to have much more whitespace between individual cells. My code didn't change. It looks like the culprit is .rt-td-inner, which has extra padding and was introduced in commit d1ecacd5683c7f13533a4688514d832f89e39b19 (I assume this is in reactable.css. My old code just had a div <div class="rt-td rt-align-center"> with the content of the cell inside. In the new version, this div now first contains a <div class="rt-td-inner"> which contains the actual content of that cell.

I assume I can probably just fix it by setting padding to 0 for .rt-td-inner? I may have missed it, but shouldn't this have been documented as a breaking change?

glin commented 2 years ago

Hi, this shouldn't have been a breaking change as the padding was moved from the outer cell element to the new inner cell wrapper, and still the same in total. But I can see how this change could have broken tables that had custom padding styles on its cells, applied with custom CSS instead of reactableTheme(cellPadding = "..."). I think a few older examples had done this before, and I had changed them to use reactableTheme() a while back. If this is what your table had done, I'm sorry about that, I can retroactively document that as a breaking change in the 0.3.0 NEWS.

To fix this, I'd suggest using reactableTheme(cellPadding = "...") instead of custom CSS, like in this theming example. Setting padding to 0 on .rt-td-inner could also work, but reactable's CSS classes are undocumented and subject to change, so I definitely recommend using the theme approach if possible.

glin commented 1 year ago

I've added this to the v0.3.0 NEWS as a breaking change (https://github.com/glin/reactable/commit/87e38cb649fdfcd846ef7c700d05e4ebed169ee6).