Merge pull request #871 from objectstack-ai/copilot/fix-empty-rows-in-list-view

Author: hotlong

ROADMAP.md

@@ -1031,6 +1031,14 @@ The `FlowDesigner` is a canvas-based flow editor that bridges the gap between th
 
 **Tests:** Added integration test in `ListViewGroupingPropagation.test.tsx` that verifies toggling a group field via the toolbar immediately updates the rendered schema. All 117 ListView tests pass.
 
+### ListView Grouping Mode Empty Rows (February 2026)
+
+**Root Cause:** When grouping is enabled in list view, `buildGroupTableSchema` in `ObjectGrid.tsx` sets `pagination: false` but inherits `pageSize: 10` from the parent schema. The `DataTableRenderer` filler row logic (`Array.from({ length: Math.max(0, pageSize - paginatedData.length) })`) pads each group table with empty rows up to `pageSize`, creating many blank lines.
+
+**Fix:** Added `pagination &&` condition to filler row rendering in `data-table.tsx`. Filler rows only render when pagination is enabled, since their purpose is maintaining consistent page height during paginated views.
+
+**Tests:** Added 2 tests in `data-table-airtable-ux.test.tsx` verifying filler rows are skipped when pagination is off and still rendered when pagination is on. All 59 related tests pass.
+
 ---
 
 ## ⚠️ Risk Management

packages/components/src/renderers/complex/__tests__/data-table-airtable-ux.test.tsx

@@ -185,3 +185,55 @@ describe('Row group hover class', () => {
     expect(aliceRow).toHaveClass('group/row');
   });
 });
+
+// =========================================================================
+// 5. Filler rows behavior
+// =========================================================================
+describe('Filler rows', () => {
+  it('should not render filler rows when pagination is disabled', async () => {
+    // pagination: false with pageSize: 10 and only 2 data rows
+    // should NOT produce empty filler rows
+    render(
+      <SchemaRenderer
+        schema={{ ...baseSchema, pagination: false, pageSize: 10 }}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Alice')).toBeInTheDocument();
+    });
+
+    const table = screen.getByRole('table');
+    const tbody = table.querySelector('tbody');
+    const allRows = tbody!.querySelectorAll('tr');
+
+    // Should only have data rows (2) + add-record row if any, no filler rows
+    // With 2 data items and no add-record, expect exactly 2 rows
+    const fillerRows = Array.from(allRows).filter(
+      (row) => row.querySelector('td[class*="p-0"]') && row.textContent === ''
+    );
+    expect(fillerRows).toHaveLength(0);
+  });
+
+  it('should render filler rows when pagination is enabled and page is not full', async () => {
+    render(
+      <SchemaRenderer
+        schema={{ ...baseSchema, pagination: true, pageSize: 5, searchable: false }}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Alice')).toBeInTheDocument();
+    });
+
+    const table = screen.getByRole('table');
+    const tbody = table.querySelector('tbody');
+    const allRows = tbody!.querySelectorAll('tr');
+
+    // With 2 data rows and pageSize 5, expect 3 filler rows (5 - 2 = 3)
+    const fillerRows = Array.from(allRows).filter(
+      (row) => row.querySelector('td[class*="p-0"]') && row.textContent === ''
+    );
+    expect(fillerRows).toHaveLength(3);
+  });
+});

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

@@ -920,8 +920,8 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                     </TableCell>
                   </TableRow>
                 )}
-                {/* Filler rows to maintain height consistency */}
-                {paginatedData.length > 0 && Array.from({ length: Math.max(0, pageSize - paginatedData.length) }).map((_, i) => (
+                {/* Filler rows to maintain height consistency (only when pagination is enabled) */}
+                {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>