Skip to content

fix: skip filler rows in data-table when pagination is disabled#871

Merged
hotlong merged 3 commits intomainfrom
copilot/fix-empty-rows-in-list-view
Feb 26, 2026
Merged

fix: skip filler rows in data-table when pagination is disabled#871
hotlong merged 3 commits intomainfrom
copilot/fix-empty-rows-in-list-view

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Feb 26, 2026

Grouped list view renders excessive empty rows because each group's data-table inherits pageSize: 10 while setting pagination: false. The filler row logic pads every group to 10 rows regardless.

Change

In data-table.tsx, gate filler row rendering on pagination being enabled:

- {paginatedData.length > 0 && Array.from({ length: Math.max(0, pageSize - paginatedData.length) }).map((_, i) => (
+ {pagination && paginatedData.length > 0 && Array.from({ length: Math.max(0, pageSize - paginatedData.length) }).map((_, i) => (

Filler rows exist to maintain consistent page height during pagination — they have no purpose when pagination is off (grouped views, embedded tables).

Tests

  • Added test: no filler rows when pagination: false with pageSize: 10
  • Added test: filler rows still render when pagination: true
Original prompt

列表视图分组模式有很多空行


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@vercel
Copy link
Copy Markdown

vercel Bot commented Feb 26, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
objectui Ready Ready Preview, Comment Feb 26, 2026 9:50am
objectui-demo Ready Ready Preview, Comment Feb 26, 2026 9:50am
objectui-storybook Ready Ready Preview, Comment Feb 26, 2026 9:50am

Request Review

Copilot AI and others added 2 commits February 26, 2026 09:39
When grouping is enabled in list view, each group renders a data-table
with pagination=false but inherits pageSize=10. This caused the filler
row logic to pad each group with empty rows up to pageSize, creating
many blank lines. Fix by only rendering filler rows when pagination
is enabled.

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix empty rows in list view group mode fix: skip filler rows in data-table when pagination is disabled Feb 26, 2026
@hotlong hotlong marked this pull request as ready for review February 26, 2026 09:50
Copilot AI review requested due to automatic review settings February 26, 2026 09:50
@hotlong hotlong merged commit 4c898f2 into main Feb 26, 2026
4 of 5 checks passed
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Fixes excessive empty rows in grouped list views by preventing DataTableRenderer from rendering filler rows when pagination is disabled (even if pageSize is set).

Changes:

  • Gate filler row rendering on pagination being enabled in DataTableRenderer.
  • Add tests covering filler-row behavior for pagination: false vs pagination: true.
  • Document the root cause, fix, and test coverage update in ROADMAP.md.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File Description
packages/components/src/renderers/complex/data-table.tsx Skip rendering filler rows unless pagination is enabled.
packages/components/src/renderers/complex/tests/data-table-airtable-ux.test.tsx Adds assertions for filler row presence/absence depending on pagination.
ROADMAP.md Records the bug’s root cause and the implemented fix + tests.
Comments suppressed due to low confidence (1)

packages/components/src/renderers/complex/data-table.tsx:927

  • Filler row colSpan doesn’t include the optional row-numbers column. When showRowNumbers is true, data rows include an extra cell but filler rows span one fewer column, which can misalign the table layout. Consider matching the other colSpan calculations in this component by adding (showRowNumbers ? 1 : 0) here as well (and any other optional leading columns).
                {pagination && paginatedData.length > 0 && Array.from({ length: Math.max(0, pageSize - paginatedData.length) }).map((_, i) => (
                  <TableRow key={`empty-${i}`} className="hover:bg-transparent">
                    <TableCell colSpan={columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0)} className="h-[52px] p-0" />
                  </TableRow>

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.

3 participants