From df93c6343069472c9ab96da9bf9f94bbc0962763 Mon Sep 17 00:00:00 2001
From: Giovanni Gonzaga <giovanni@buildo.io>
Date: Fri, 22 Sep 2023 13:39:03 +0200
Subject: [PATCH] fix using Gruped Headers and virtualization together

---
 packages/bento-design-system/src/Table/Table.tsx       |  4 ++--
 .../stories/Components/Table.stories.tsx               | 10 ++++++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/bento-design-system/src/Table/Table.tsx b/packages/bento-design-system/src/Table/Table.tsx
index dfa8c38e7..8629549f0 100644
--- a/packages/bento-design-system/src/Table/Table.tsx
+++ b/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 }} />
           ))
         )
diff --git a/packages/bento-design-system/stories/Components/Table.stories.tsx b/packages/bento-design-system/stories/Components/Table.stories.tsx
index 7ac70ebda..76f50cf16 100644
--- a/packages/bento-design-system/stories/Components/Table.stories.tsx
+++ b/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;