feat: dynamic table MAASENG-2987

package.json

@@ -112,5 +112,8 @@
     "react-dropzone": "14.2.3",
     "react-router-dom": "^6.0.0",
     "vanilla-framework": "^4.6.0"
+  },
+  "dependencies": {
+    "@tanstack/react-table": "^8.15.3"
   }
 }

src/constants.ts

@@ -0,0 +1,10 @@
+export const BREAKPOINTS = {
+  // Mobile (portrait)
+  xSmall: 460,
+  // Mobile or tablet
+  small: 620,
+  // Desktop
+  large: 1036,
+  // Large desktop
+  xLarge: 1681,
+};

src/lib/components/DynamicTable/DynamicTable.scss

@@ -0,0 +1,53 @@
+@import "vanilla-framework";
+
+.p-table-dynamic {
+  margin-bottom: 0;
+
+  thead,
+  tbody {
+    display: block;
+    overflow: hidden auto;
+  }
+
+  thead {
+    scrollbar-gutter: stable;
+  }
+
+  thead tr,
+  tbody tr {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+  }
+
+  tbody {
+    height: auto;
+    min-height: auto;
+  }
+
+  &:not([aria-busy="true"]) tbody:not([aria-busy="true"]) {
+    tr:hover,
+    tr:focus-within {
+      @include vf-transition($property: #{background}, $duration: fast);
+
+      background-color: $colors--light-theme--background-hover;
+    }
+  }
+
+  thead th:last-child,
+  tbody td:last-child {
+    text-align: right;
+  }
+
+  thead th button {
+    padding-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+.p-table-dynamic.p-table-dynamic--with-select {
+  thead th:first-child,
+  tbody td:first-child {
+    width: 3rem;
+  }
+}

src/lib/components/DynamicTable/DynamicTable.stories.tsx

@@ -0,0 +1,115 @@
+import { Meta } from "@storybook/react";
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import { DynamicTable } from "@/lib/components/DynamicTable/DynamicTable";
+
+type Device = {
+  fqdn: string;
+  ipAddress: string;
+  zone: string;
+  owner: string;
+};
+
+type DeviceColumnDef = ColumnDef<Device, Device[keyof Device]>;
+
+const columns: DeviceColumnDef[] = [
+  {
+    id: "fqdn",
+    accessorKey: "fqdn",
+    header: () => <div>FQDN</div>,
+  },
+  {
+    id: "ipAddress",
+    accessorKey: "ipAddress",
+    header: () => <div>IP address</div>,
+  },
+  {
+    id: "zone",
+    accessorKey: "zone",
+    header: () => <div>Zone</div>,
+  },
+  {
+    id: "owner",
+    accessorKey: "owner",
+    header: () => <div>Owner</div>,
+  },
+];
+
+const data = Array.from({ length: 50 }, (_, index) => ({
+  fqdn: `machine-${index}`,
+  ipAddress: `192.168.1.${index}`,
+  zone: `zone-${index}`,
+  owner: `owner-${index}`,
+}));
+
+const TableChildren = () => {
+  const table = useReactTable<Device>({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <>
+      <thead>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <tr key={headerGroup.id}>
+            {headerGroup.headers.map((header) => {
+              return (
+                <th
+                  className={`${header.column.id}`}
+                  colSpan={header.colSpan}
+                  key={header.id}
+                >
+                  {flexRender(
+                    header.column.columnDef.header,
+                    header.getContext(),
+                  )}
+                </th>
+              );
+            })}
+          </tr>
+        ))}
+      </thead>
+      <DynamicTable.Body>
+        {table.getRowModel().rows.map((row) => {
+          return (
+            <tr key={row.id}>
+              {row.getVisibleCells().map((cell) => {
+                return (
+                  <td className={`${cell.column.id}`} key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                );
+              })}
+            </tr>
+          );
+        })}
+      </DynamicTable.Body>
+    </>
+  );
+};
+
+const meta: Meta<typeof DynamicTable> = {
+  title: "components/DynamicTable",
+  component: DynamicTable,
+  tags: ["autodocs"],
+  parameters: {
+    status: {
+      type: "candidate",
+    },
+  },
+};
+
+export default meta;
+
+export const Example = {
+  args: {
+    children: <TableChildren />,
+  },
+};

src/lib/components/DynamicTable/DynamicTable.test.tsx

@@ -0,0 +1,73 @@
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+
+import { DynamicTable } from "./DynamicTable";
+
+import { BREAKPOINTS } from "@/constants";
+
+const offset = 100;
+
+beforeAll(() => {
+  // simulate top offset as JSDOM doesn't support getBoundingClientRect
+  // - equivalent of another element of height 100px being displayed above the table
+  vi.spyOn(
+    window.HTMLElement.prototype,
+    "getBoundingClientRect",
+  ).mockReturnValue({
+    bottom: 0,
+    height: 0,
+    left: 0,
+    right: 0,
+    top: offset,
+    width: 0,
+  } as DOMRect);
+});
+
+it("sets a fixed table body height based on top offset on large screens", async () => {
+  vi.spyOn(window, "innerWidth", "get").mockReturnValue(BREAKPOINTS.xSmall);
+
+  await act(async () => {
+    fireEvent(window, new Event("resize"));
+  });
+
+  const { container } = render(
+    <DynamicTable>
+      <DynamicTable.Body className="test-class">
+        <tr>
+          <td>Test content</td>
+        </tr>
+      </DynamicTable.Body>
+    </DynamicTable>,
+  );
+
+  const tbody = container.querySelector("tbody");
+
+  await act(async () => {
+    fireEvent(window, new Event("resize"));
+  });
+
+  // does not alter the height on small screens
+  expect(tbody).toHaveStyle("height: undefined");
+
+  vi.spyOn(window, "innerWidth", "get").mockReturnValue(BREAKPOINTS.large);
+
+  await act(async () => {
+    fireEvent(window, new Event("resize"));
+  });
+
+  await vi.waitFor(() =>
+    expect(tbody).toHaveStyle(`height: calc(100vh - ${offset + 1}px)`),
+  );
+});
+
+it("displays loading state", () => {
+  const { container } = render(
+    <DynamicTable>
+      <DynamicTable.Loading />
+    </DynamicTable>,
+  );
+
+  expect(screen.getByText("Loading...")).toBeInTheDocument();
+  expect(container.querySelector("tbody")).toHaveAttribute("aria-busy", "true");
+  expect(screen.getAllByRole("row", { hidden: true })).toHaveLength(10);
+});