From c8fe8ba4fdc3fefefa079b3ffbcb8d45b1c7a494 Mon Sep 17 00:00:00 2001
From: LP B <xAt0mZ@users.noreply.github.com>
Date: Fri, 6 Mar 2026 18:17:34 +0100
Subject: [PATCH] fix(app): paginate nested tables (#1999)

---
 .../components/datatables/NestedDatatable.tsx | 26 +++++++++++++++++++
 .../TasksDatatable/TasksDatatable.tsx         |  1 +
 2 files changed, 27 insertions(+)

diff --git a/app/react/components/datatables/NestedDatatable.tsx b/app/react/components/datatables/NestedDatatable.tsx
index 17081e166..2798eff9f 100644
--- a/app/react/components/datatables/NestedDatatable.tsx
+++ b/app/react/components/datatables/NestedDatatable.tsx
@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+import { difference } from 'lodash';
 import {
   getCoreRowModel,
   getFilteredRowModel,
@@ -14,6 +16,7 @@ import { defaultGetRowId } from './defaultGetRowId';
 import { Table } from './Table';
 import { NestedTable } from './NestedTable';
 import { DatatableContent } from './DatatableContent';
+import { DatatableFooter } from './DatatableFooter';
 import { BasicTableSettings, DefaultType } from './types';
 
 interface Props<D extends DefaultType> extends AutomationTestingProps {
@@ -69,6 +72,18 @@ export function NestedDatatable<D extends DefaultType>({
     ...(enablePagination && { getPaginationRowModel: getPaginationRowModel() }),
   });
 
+  const tableState = tableInstance.getState();
+  const selectedRowModel = tableInstance.getSelectedRowModel();
+  const selectedItems = selectedRowModel.rows.map((row) => row.original);
+  const filteredItems = tableInstance
+    .getFilteredRowModel()
+    .rows.map((row) => row.original);
+
+  const hiddenSelectedItems = useMemo(
+    () => difference(selectedItems, filteredItems),
+    [selectedItems, filteredItems]
+  );
+
   return (
     <NestedTable>
       <Table.Container noWidget>
@@ -80,6 +95,17 @@ export function NestedDatatable<D extends DefaultType>({
           aria-label={ariaLabel}
           data-cy={dataCy}
         />
+        {enablePagination && (
+          <DatatableFooter
+            onPageChange={tableInstance.setPageIndex}
+            onPageSizeChange={tableInstance.setPageSize}
+            page={tableState.pagination.pageIndex}
+            pageSize={tableState.pagination.pageSize}
+            pageCount={tableInstance.getPageCount()}
+            totalSelected={selectedItems.length}
+            totalHiddenSelected={hiddenSelectedItems.length}
+          />
+        )}
       </Table.Container>
     </NestedTable>
   );
diff --git a/app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/TasksDatatable.tsx b/app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/TasksDatatable.tsx
index 02de64df9..38f659623 100644
--- a/app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/TasksDatatable.tsx
+++ b/app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/TasksDatatable.tsx
@@ -25,6 +25,7 @@ export function TasksDatatable({
       search={search}
       aria-label="Tasks table"
       data-cy="docker-service-tasks-nested-datatable"
+      initialSortBy={{ id: 'Updated', desc: true }}
     />
   );
 }