Added virtualization to DxcResultsetTable

apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx

@@ -9,6 +9,7 @@ import StatusBadge from "@/common/StatusBadge";
 import reduced from "./examples/reduced";
 import Link from "next/link";
 import paginatorHidden from "./examples/paginatorHidden";
+import virtualized from "./examples/virtualized";
 
 const actionsType = `{
   icon: string | SVG;
@@ -207,6 +208,24 @@ const sections = [
               <TableCode>0</TableCode>
             </td>
           </tr>
+          <tr>
+            <td>
+              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
+                <StatusBadge status="new" />
+                virtualizedHeight
+              </DxcFlex>
+            </td>
+            <td>
+              <TableCode>string</TableCode>
+            </td>
+            <td>
+              A fixed height must be set to enable virtualization. If no height is provided, the table will
+              automatically adjust to the height of its content, and virtualization will not be applied.
+            </td>
+            <td>
+              <td>-</td>
+            </td>
+          </tr>
         </tbody>
       </DxcTable>
     ),
@@ -286,6 +305,10 @@ const sections = [
         title: "No paginator",
         content: <Example example={paginatorHidden} defaultIsVisible />,
       },
+      {
+        title: "Virtualized",
+        content: <Example example={virtualized} defaultIsVisible />,
+      },
     ],
   },
 ];

apps/website/screens/components/resultset-table/code/examples/rows.tsx

@@ -0,0 +1,15 @@
+import { DxcButton } from "@dxc-technology/halstack-react";
+
+const cities = ["London", "New York", "Madrid", "Berlin", "Paris", "Tokyo"];
+const names = ["Alice", "Bob", "Charlie", "Diana", "Evan", "Fiona"];
+export const rows = Array.from({ length: 100000 }, (_, index) => {
+  const id = String(index + 1).padStart(6, "0");
+  const name = names[index % names.length];
+  const city = cities[index % cities.length];
+  return [
+    { displayValue: id, sortValue: id },
+    { displayValue: name, sortValue: name },
+    { displayValue: city, sortValue: city },
+    { displayValue: <DxcButton icon="delete" /> },
+  ];
+});

apps/website/screens/components/resultset-table/code/examples/virtualized.ts

@@ -0,0 +1,26 @@
+import { DxcResultsetTable, DxcButton, DxcInset } from "@dxc-technology/halstack-react";
+import { rows } from "./rows";
+
+const code = `() => {
+  const columns = [
+    { displayValue: "Id", isSortable: true },
+    { displayValue: "Name", isSortable: true },
+    { displayValue: "City", isSortable: true },
+    { displayValue: "Actions", isSortable: false },
+  ];
+
+  return (
+    <DxcInset space="var(--spacing-padding-xl)">
+      <DxcResultsetTable columns={columns} rows={rows} virtualizedHeight="500px" itemsPerPage={10000}/>
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcResultsetTable,
+  DxcButton,
+  DxcInset,
+  rows,
+};
+
+export default { code, scope };

apps/website/screens/components/resultset-table/overview/ResultsetTableOverviewPage.tsx

@@ -114,8 +114,8 @@ const sections = [
           <DxcParagraph>
             For very large datasets, virtualization improves performance by rendering only the visible rows within the
             viewport, significantly reducing DOM load and enabling smooth scrolling. To enable virtualization, the{" "}
-            <Code>height</Code> prop must be set to a valid value on the resultset table. This defines the scrollable
-            area and allows the table to calculate which rows should be rendered dynamically.
+            <Code>virtualizedHeight</Code> prop must be set to a valid value on the resultset table. This defines the
+            scrollable area and allows the table to calculate which rows should be rendered dynamically.
           </DxcParagraph>
         ),
       },