Added virtualization to DxcResultsetTable

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

@@ -10,6 +10,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;
@@ -76,6 +77,24 @@ const sections = [
             </td>
             <td>-</td>
           </tr>
+          <tr>
+            <td>
+              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
+                <StatusBadge status="new" />
+                height
+              </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>
           <tr>
             <td>
               <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
@@ -91,6 +110,21 @@ const sections = [
               <TableCode>false</TableCode>
             </td>
           </tr>
+          <tr>
+            <td>
+              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
+                <StatusBadge status="required" />
+                rows
+              </DxcFlex>
+            </td>
+            <td>
+              <TableCode>boolean</TableCode>
+            </td>
+            <td>If true, paginator will not be displayed.</td>
+            <td>
+              <TableCode>false</TableCode>
+            </td>
+          </tr>
           <tr>
             <td>itemsPerPage</td>
             <td>
@@ -287,6 +321,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/basicUsage.ts

@@ -52,7 +52,7 @@ const code = `() => {
       <DxcResultsetTable
         columns={columns}
         rows={rows}
-      ></DxcResultsetTable>
+      />
     </DxcInset>
   );
 }`;

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

@@ -75,7 +75,7 @@ const code = `() => {
         columns={columns}
         rows={rows}
         hidePaginator={true}
-      ></DxcResultsetTable>
+      />
     </DxcInset>
   );
 }`;

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

@@ -75,7 +75,7 @@ const code = `() => {
         columns={columns}
         rows={rows}
         mode="reduced"
-      ></DxcResultsetTable>
+      />
     </DxcInset>
   );
 }`;

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/sortable.ts

@@ -37,7 +37,7 @@ const code = `() => {
 
   return (
     <DxcInset space="var(--spacing-padding-xl)">
-      <DxcResultsetTable columns={columns} rows={rows}></DxcResultsetTable>
+      <DxcResultsetTable columns={columns} rows={rows}/>
     </DxcInset>
   );
 }`;

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} height="500px" itemsPerPage={10000}/>
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcResultsetTable,
+  DxcButton,
+  DxcInset,
+  rows,
+};
+
+export default { code, scope };