feature/PxWeb2-896 New layout with virtualized separated mobile and desktop tables

packages/pxweb2-ui/package.json

@@ -16,6 +16,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@tanstack/react-virtual": "^3.13.21",
     "@vitejs/plugin-react": "^5.2.0",
     "clsx": "^2.1.1",
     "hast-util-to-jsx-runtime": "^2.3.6",

packages/pxweb2-ui/src/lib/components/SideSheet/SideSheet.module.scss

@@ -15,6 +15,7 @@
   padding: 0px 0px 0px 0px;
   border-style: none;
   max-height: 100vh; // Override default margins at top and bottom for <dialog>
+  overflow: hidden;
 }
 
 .sideSheet::backdrop {

packages/pxweb2-ui/src/lib/components/Table/Table.module.scss

@@ -46,10 +46,41 @@
   thead th {
     font-family: PxWeb-font, sans-serif;
     font-weight: 700;
+
+    @media screen and (min-width: fixed.$breakpoints-small-min-width) {
+      min-width: 200px;
+    }
+  }
+
+  .desktopHeaderLabelWrapper {
+    @media screen and (min-width: fixed.$breakpoints-small-min-width) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: calc(1.25em * var(--desktop-header-lines, 3));
+    }
+  }
+  .desktopHeaderLabel {
+    @media screen and (min-width: fixed.$breakpoints-small-min-width) {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: var(--desktop-header-lines, 3);
+      line-clamp: var(--desktop-header-lines, 3);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: normal;
+      line-height: 1.25;
+      word-break: break-word;
+    }
   }
+
   thead tr:last-child th {
     text-align: end;
     border-bottom-width: 2px;
+
+    @media screen and (min-width: fixed.$breakpoints-small-min-width) {
+      text-align: center;
+    }
   }
   th.stub {
     text-align: left;
@@ -255,4 +286,26 @@
     background: var(--px-color-surface-moderate);
     border: none;
   }
+
+  .virtualPaddingCell {
+    padding: 0;
+    border: none;
+    background: none;
+  }
+}
+
+.virtualizedWrapper {
+  max-height: 70vh;
+  overflow-x: auto;
+  overflow-y: auto;
+}
+
+.virtualizedWrapperUseParentScroll {
+  max-height: none;
+  overflow-y: visible;
+}
+
+.virtualizedTable {
+  width: max-content;
+  min-width: 100%;
 }

packages/pxweb2-ui/src/lib/components/Table/Table.spec.tsx

@@ -1,48 +1,101 @@
-import { render } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+const childMocks = vi.hoisted(() => ({
+  desktopRender: vi.fn(),
+  mobileRender: vi.fn(),
+}));
+
+vi.mock('./TableDesktopVirtualized', () => ({
+  DesktopVirtualizedTable: ({
+    className,
+    getVerticalScrollElement,
+  }: {
+    className?: string;
+    getVerticalScrollElement?: () => HTMLElement | null;
+  }) => {
+    childMocks.desktopRender({ className, getVerticalScrollElement });
+    return <div data-testid="desktop-virtualized-table" />;
+  },
+}));
+
+vi.mock('./TableMobileVirtualized', () => ({
+  MobileVirtualizedTable: ({
+    className,
+    getVerticalScrollElement,
+  }: {
+    className?: string;
+    getVerticalScrollElement?: () => HTMLElement | null;
+  }) => {
+    childMocks.mobileRender({ className, getVerticalScrollElement });
+    return <div data-testid="mobile-virtualized-table" />;
+  },
+}));
 
 import Table from './Table';
 import { pxTable } from './testData';
 
 describe('Table', () => {
-  it('should render successfully desktop', () => {
-    const { baseElement } = render(
-      <Table pxtable={pxTable} isMobile={false} />,
-    );
-    expect(baseElement).toBeTruthy();
+  beforeEach(() => {
+    childMocks.desktopRender.mockClear();
+    childMocks.mobileRender.mockClear();
+  });
+
+  it('renders desktop component when isMobile is false', () => {
+    render(<Table pxtable={pxTable} isMobile={false} />);
+
+    expect(screen.getByTestId('desktop-virtualized-table')).toBeTruthy();
+    expect(screen.queryByTestId('mobile-virtualized-table')).toBeNull();
+    expect(childMocks.desktopRender).toHaveBeenCalledTimes(1);
+    expect(childMocks.mobileRender).not.toHaveBeenCalled();
   });
 
-  it('should render successfully mobile', () => {
-    const { baseElement } = render(<Table pxtable={pxTable} isMobile={true} />);
-    expect(baseElement).toBeTruthy();
+  it('renders mobile component when isMobile is true', () => {
+    render(<Table pxtable={pxTable} isMobile={true} />);
+
+    expect(screen.getByTestId('mobile-virtualized-table')).toBeTruthy();
+    expect(screen.queryByTestId('desktop-virtualized-table')).toBeNull();
+    expect(childMocks.mobileRender).toHaveBeenCalledTimes(1);
+    expect(childMocks.desktopRender).not.toHaveBeenCalled();
   });
 
-  it('should have a th header named 1968', () => {
-    const { baseElement } = render(
-      <Table pxtable={pxTable} isMobile={false} />,
+  it('forwards className and getVerticalScrollElement to desktop component', () => {
+    const getVerticalScrollElement = vi.fn(() => null);
+
+    render(
+      <Table
+        pxtable={pxTable}
+        isMobile={false}
+        className="custom-table-class"
+        getVerticalScrollElement={getVerticalScrollElement}
+      />,
+    );
+
+    expect(childMocks.desktopRender).toHaveBeenCalledWith(
+      expect.objectContaining({
+        className: 'custom-table-class',
+        getVerticalScrollElement,
+      }),
     );
-    const ths = baseElement.querySelectorAll('th');
-    let found = false;
-    ths.forEach((th) => {
-      if (th.innerHTML === '1968') {
-        found = true;
-      }
-    });
-    expect(found).toBe(true);
-    expect(ths.length).toBeGreaterThan(0);
   });
 
-  it('should NOT have a th header named 1967', () => {
-    const { baseElement } = render(
-      <Table pxtable={pxTable} isMobile={false} />,
+  it('forwards className and getVerticalScrollElement to mobile component', () => {
+    const getVerticalScrollElement = vi.fn(() => null);
+
+    render(
+      <Table
+        pxtable={pxTable}
+        isMobile={true}
+        className="mobile-table-class"
+        getVerticalScrollElement={getVerticalScrollElement}
+      />,
+    );
+
+    expect(childMocks.mobileRender).toHaveBeenCalledWith(
+      expect.objectContaining({
+        className: 'mobile-table-class',
+        getVerticalScrollElement,
+      }),
     );
-    const ths = baseElement.querySelectorAll('th');
-    let found = false;
-    ths.forEach((th) => {
-      if (th.innerHTML === '1967') {
-        found = true;
-      }
-    });
-    expect(found).toBe(false);
   });
 });

packages/pxweb2-ui/src/lib/components/Table/Table.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, within } from 'storybook/test';
 
 import { Table } from './Table';
 import { pxTable } from './testData';
@@ -15,17 +14,4 @@ export const Default: Story = {
   args: {
     pxtable: pxTable,
   },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    expect(canvas.getByText(/region_1/i)).toBeTruthy();
-    expect(canvas.getByText(/region_2/i)).toBeTruthy();
-    expect(canvas.getByText(/region_3/i)).toBeTruthy();
-    expect(canvas.getByText(/region_4/i)).toBeTruthy();
-    expect(canvas.getByText(/CS_1/i)).toBeTruthy();
-    expect(canvas.getByText(/CS_2/i)).toBeTruthy();
-    expect(canvas.getByText(/CS_3/i)).toBeTruthy();
-    expect(canvas.getByText(/CS_4/i)).toBeTruthy();
-    expect(canvas.getByText(/CS_5/i)).toBeTruthy();
-  },
 };