⚡ perf(ui): enable virtual scrolling for the grouped containers table

- Grouped container tables no longer render every row eagerly, keeping the DOM light on large deployments

Author: s-b-e-n-s-o-n

ui/src/components/containers/ContainersGroupedViews.vue

@@ -232,7 +232,7 @@ function selectTableRow(row: Record<string, unknown>) {
         :sort-asc="containerSortAsc"
         :selected-key="selectedContainerKey"
         :show-actions="true"
-        :virtual-scroll="false"
+        :virtual-scroll="true"
         :full-width-row="isTableRowFullWidth"
         :row-interactive="isTableRowInteractive"
         :row-class="tableRowClass"

ui/tests/components/containers/ContainersGroupedViews.spec.ts

@@ -12,7 +12,7 @@ vi.mock('@/components/containers/containersViewTemplateContext', () => ({
 }));
 
 const DataTableStub = defineComponent({
-  props: ['rows', 'rowClass', 'rowClickable', 'fullWidthRow', 'rowKey'],
+  props: ['rows', 'rowClass', 'rowClickable', 'fullWidthRow', 'rowKey', 'virtualScroll'],
   emits: ['update:sort-key', 'update:sort-asc', 'row-click'],
   setup(props, { emit }) {
     const isFullWidth = (row: Record<string, unknown>) =>
@@ -722,6 +722,38 @@ describe('ContainersGroupedViews', () => {
     expect(wrapper.text()).toContain('stack-b');
   });
 
+  it('enables virtual scrolling for grouped table mode', async () => {
+    const alpha = makeContainer({
+      id: 'c-alpha',
+      name: 'alpha',
+      newTag: '1.1.0',
+      updateKind: 'minor',
+      status: 'running',
+    });
+
+    const { context } = makeContext();
+    context.groupByStack.value = true;
+    context.containerViewMode.value = 'table';
+    context.filteredContainers.value = [alpha];
+    context.displayContainers.value = [alpha];
+    context.renderGroups.value = [
+      {
+        key: 'stack-a',
+        name: 'stack-a',
+        containers: [alpha],
+        containerCount: 1,
+        updatesAvailable: 1,
+        updatableCount: 1,
+      },
+    ];
+    mocked.context = context;
+
+    const wrapper = mountSubject();
+    await nextTick();
+
+    expect(wrapper.findComponent(DataTableStub).props('virtualScroll')).toBe(true);
+  });
+
   it('covers card/list view events and footer action handlers', async () => {
     const running = makeContainer({
       id: 'c-card-1',

ui/tests/views/ContainersView.spec.ts

@@ -635,10 +635,10 @@ describe('ContainersView', () => {
       expect(wrapper.findAll('button[disabled]').length).toBeGreaterThan(0);
     });
 
-    it('disables virtual scrolling so the table flows with the page', async () => {
+    it('enables virtual scrolling for the grouped containers table', async () => {
       const wrapper = await mountContainersView([makeContainer()]);
       const dataTable = wrapper.findComponent(childStubs.DataTable as any);
-      expect(dataTable.props('virtualScroll')).toBe(false);
+      expect(dataTable.props('virtualScroll')).toBe(true);
     });
 
     it('renders DataFilterBar', async () => {