fix using Gruped Headers and virtualization together

buildo · Sep 22, 2023 · df93c63 · df93c63
1 parent 95f4d0d
commit df93c63
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git 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
@@ -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;