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

[jozilla]

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 d1ecacd (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]

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]

I've added this to the v0.3.0 NEWS as a breaking change (87e38cb).