Skip to content

🐛 fix: show VirtualizedTable bottom borders when pagination bar is hidden#657

Merged
futjesus merged 2 commits into
mainfrom
fix/virtualized-table-pagination-bottom-borders
Jul 6, 2026
Merged

🐛 fix: show VirtualizedTable bottom borders when pagination bar is hidden#657
futjesus merged 2 commits into
mainfrom
fix/virtualized-table-pagination-bottom-borders

Conversation

@futjesus

@futjesus futjesus commented Jul 6, 2026

Copy link
Copy Markdown
Member

Problem

When VirtualizedTable has pagination enabled (showPagination or any of its variants) but totalItems <= DEFAULT_PAGE_SIZE (10), the Pagination footer returns null — yet WrapperBody and Body still style the table as if the footer were going to draw the bottom edge. The result is square bottom corners and a missing bottom border (especially visible in dark mode).

Fix

The mismatch existed because three components decided the bottom edge from showPagination alone, while only Pagination also considered totalItems:

  • Added a shared isPaginationBarVisible(totalItems) predicate in VirtualizedTable/utils as the single source of truth for whether the pagination bar actually renders.
  • Pagination now uses the predicate for its early return (same behavior as before).
  • WrapperBody also applies rounded-lg when the bar is hidden due to few items.
  • Body gates rounded-bl-lg / rounded-br-lg, the dark-mode last-row bottom border, and ExpandableRow's isLastRow on the bar actually being visible, not just on showPagination.
  • Secondary fix: the useMemo deriving showPagination in VirtualizedTable.tsx had empty deps, so it never recomputed when pagination props changed — proper deps added.

Testing

  • New VirtualizedTable.test.tsx covering: no pagination, pagination enabled with few items (bar hidden → borders closed by the table), and pagination visible (bar closes the borders), plus jest-axe.
  • New PaginationWithFewItems story in Light and Dark to verify visually.
  • npm run test (455 passed), npm run check:types, npm run lint all green.

@futjesus futjesus merged commit f4684de into main Jul 6, 2026
1 check passed
@futjesus futjesus deleted the fix/virtualized-table-pagination-bottom-borders branch July 6, 2026 15:49
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

Successfully merging this pull request may close these issues.

1 participant