From 04162167f5d66090ef6e91587c7f177e8cae42bf Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Fri, 27 Mar 2026 10:32:40 +0100
Subject: [PATCH] fix(catalog-react): fix relation cards showing only one
 entity

Use `paginationOptions: { type: 'none' }` in EntityDataTable instead
of deriving page size from data length, which was 0 during the initial
loading render causing only one row to be displayed.

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 .changeset/smart-cycles-fall.md                |  5 +++++
 .../EntityDataTable/EntityDataTable.test.tsx   | 18 ++++++++++++++++++
 .../EntityDataTable/EntityDataTable.tsx        |  3 +--
 3 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/smart-cycles-fall.md

diff --git a/.changeset/smart-cycles-fall.md b/.changeset/smart-cycles-fall.md
new file mode 100644
index 0000000000..dcc5e942bd
--- /dev/null
+++ b/.changeset/smart-cycles-fall.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Fixed entity relation cards (e.g., "Has components") only showing one entity at a time by using `paginationOptions: { type: 'none' }` instead of deriving page size from data length.
diff --git a/plugins/catalog-react/src/components/EntityDataTable/EntityDataTable.test.tsx b/plugins/catalog-react/src/components/EntityDataTable/EntityDataTable.test.tsx
index 77b0e26a02..1a59deecf8 100644
--- a/plugins/catalog-react/src/components/EntityDataTable/EntityDataTable.test.tsx
+++ b/plugins/catalog-react/src/components/EntityDataTable/EntityDataTable.test.tsx
@@ -132,6 +132,24 @@ describe('<EntityDataTable />', () => {
     expect(rows()[1]).toHaveTextContent('alpha');
   });
 
+  it('shows all rows after loading completes', async () => {
+    const { rerender } = await renderInTestApp(
+      <EntityDataTable columnConfig={columns} data={[]} loading />,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
+    );
+
+    rerender(<EntityDataTable columnConfig={columns} data={entities} />);
+
+    const rows = screen.getAllByRole('row').slice(1);
+    expect(rows).toHaveLength(2);
+    expect(rows[0]).toHaveTextContent('bravo');
+    expect(rows[1]).toHaveTextContent('alpha');
+  });
+
   it('does not sort when column has no sortValue', async () => {
     const unsortableColumns: EntityColumnConfig[] = [
       {
diff --git a/plugins/catalog-react/src/components/EntityDataTable/EntityDataTable.tsx b/plugins/catalog-react/src/components/EntityDataTable/EntityDataTable.tsx
index 32234b1bc0..7928dc227d 100644
--- a/plugins/catalog-react/src/components/EntityDataTable/EntityDataTable.tsx
+++ b/plugins/catalog-react/src/components/EntityDataTable/EntityDataTable.tsx
@@ -61,7 +61,7 @@ export function EntityDataTable(props: EntityDataTableProps) {
     mode: 'complete',
     data: tableData,
     sortFn,
-    paginationOptions: { pageSize: tableData.length || 1 },
+    paginationOptions: { type: 'none' },
   });
 
   return (
@@ -71,7 +71,6 @@ export function EntityDataTable(props: EntityDataTableProps) {
       loading={loading}
       error={error}
       emptyState={emptyState}
-      pagination={{ type: 'none' }}
     />
   );
 }