Merge pull request #781 from buildo/fix-virtualization-with-grouped-headers

fix using Gruped Headers and virtualization together

Author: federico-ercoles

packages/bento-design-system/src/Table/Table.tsx

@@ -386,7 +386,7 @@ export function Table<
   }
 
   const renderedRows = virtualizeRows
-    ? columns
+    ? flatColumns
         .map((_, index) => (
           <div key={`paddingTop${index}`} style={{ marginTop: virtualPaddingTop }} />
         ))
@@ -403,7 +403,7 @@ export function Table<
           })
         )
         .concat(
-          columns.map((_, index) => (
+          flatColumns.map((_, index) => (
             <div key={`paddingBottom${index}`} style={{ marginBottom: virtualPaddingBottom }} />
           ))
         )

packages/bento-design-system/stories/Components/Table.stories.tsx

@@ -577,3 +577,13 @@ export const VirtualizedRows = {
     data: repeatToLength(exampleData, 1_000),
   },
 } satisfies Story;
+
+export const VirtualizedRowsGrupedHeaders = {
+  args: {
+    columns: exampleGroupedColumns,
+    stickyHeaders: true,
+    height: { custom: 340 },
+    virtualizeRows: true,
+    data: repeatToLength(exampleData, 1_000),
+  },
+} satisfies Story;