allow virtualizing rows when groupBy is active

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

Hide file tree

Showing 2 changed files with 65 additions and 57 deletions.
diff --git a/packages/bento-design-system/src/Table/Table.tsx b/packages/bento-design-system/src/Table/Table.tsx
@@ -94,25 +94,20 @@ type Props<
 > = {
   columns: C;
   data: ReadonlyArray<RowType<C>>;
+  groupBy?: C extends ReadonlyArray<SimpleColumnType<string, any, any>>
+    ? C[number]["accessor"]
+    : C extends ReadonlyArray<GroupedColumnType<string, any, any>>
+    ? C[number]["columns"][number]["accessor"]
+    : never;
   noResultsTitle?: LocalizedString;
   noResultsDescription?: LocalizedString;
   noResultsFeedbackSize?: FeedbackProps["size"];
   initialSorting?: Array<SortingRule<C>>;
   stickyHeaders?: boolean;
   height?: { custom: string | number };
   onRowPress?: (row: Row<RowType<C>>) => void;
-} & (
-  | {
-      groupBy?: C extends ReadonlyArray<SimpleColumnType<string, any, any>>
-        ? C[number]["accessor"]
-        : C extends ReadonlyArray<GroupedColumnType<string, any, any>>
-        ? C[number]["columns"][number]["accessor"]
-        : never;
-      virtualizeRows?: never;
-    }
-  | { groupBy?: never; virtualizeRows?: boolean | { estimateRowHeight: (index: number) => number } }
-) &
-  SortingProps<C>;
+  virtualizeRows?: boolean | { estimateRowHeight: (index: number) => number };
+} & SortingProps<C>;
 
 /**
  * A component that renders a Table, with sorting capabilities
@@ -360,8 +355,9 @@ export function Table<
       .exhaustive();
   }
 
-  const gridTemplateColumns = flatColumns
-    .filter(({ accessor }) => accessor !== groupBy)
+  const nonGroupedColumns = flatColumns.filter(({ accessor }) => accessor !== groupBy);
+
+  const gridTemplateColumns = nonGroupedColumns
     .map(({ gridWidth = "fit-content" }) => gridWidthStyle(gridWidth))
     .join(" ");
 
@@ -385,50 +381,43 @@ export function Table<
     ));
   }
 
-  const renderedRows = virtualizeRows
-    ? columns
-        .map((_, index) => (
-          <div key={`paddingTop${index}`} style={{ marginTop: virtualPaddingTop }} />
-        ))
-        .concat(
-          virtualRows.map((virtualRow) => {
-            const index = virtualRow.index;
-            const row = rows[index];
-            prepareRow(row);
-            return (
-              <RowContainer key={index} row={row} onPress={onRowPress}>
-                {renderCells(row.cells, index, onRowPress !== undefined)}
-              </RowContainer>
-            );
-          })
-        )
-        .concat(
-          columns.map((_, index) => (
-            <div key={`paddingBottom${index}`} style={{ marginBottom: virtualPaddingBottom }} />
-          ))
-        )
-    : rows.flatMap((row, index) => {
-        if (row.isGrouped) {
-          return [
-            <SectionHeader
-              key={row.groupByVal}
-              label={row.groupByVal}
-              numberOfStickyColumns={stickyLeftColumnsIds.length}
-            />,
-            ...row.leafRows.map((row, index) => {
-              prepareRow(row);
-              return renderCells(row.cells, index, false);
-            }),
-          ];
-        } else {
+  const rowsToRender = virtualizeRows
+    ? virtualRows.map((virtualRow) => [rows[virtualRow.index], virtualRow.index] as const)
+    : rows.map((row, index) => [row, index] as const);
+
+  const paddingTopRow = virtualizeRows
+    ? nonGroupedColumns.map((_, index) => (
+        <div key={`paddingTop${index}`} style={{ marginTop: virtualPaddingTop }} />
+      ))
+    : [];
+  const paddingBottomRow = virtualizeRows
+    ? nonGroupedColumns.map((_, index) => (
+        <div key={`paddingBottom${index}`} style={{ marginBottom: virtualPaddingBottom }} />
+      ))
+    : [];
+
+  const renderedRows = rowsToRender.flatMap(([row, index]) => {
+    if (row.isGrouped) {
+      return [
+        <SectionHeader
+          key={row.groupByVal}
+          label={row.groupByVal}
+          numberOfStickyColumns={stickyLeftColumnsIds.length}
+        />,
+        ...row.leafRows.map((row, index) => {
           prepareRow(row);
-          return (
-            <RowContainer key={index} row={row} onPress={onRowPress}>
-              {renderCells(row.cells, index, onRowPress !== undefined)}
-            </RowContainer>
-          );
-        }
-      });
+          return renderCells(row.cells, index, false);
+        }),
+      ];
+    } else {
+      prepareRow(row);
+      return (
+        <RowContainer key={index} row={row} onPress={onRowPress}>
+          {renderCells(row.cells, index, onRowPress !== undefined)}
+        </RowContainer>
+      );
+    }
+  });
 
   return (
     <Box
@@ -469,7 +458,9 @@ export function Table<
           />
         ))
       )}
+      {paddingTopRow}
       {renderedRows}
+      {paddingBottomRow}
     </Box>
   );
 }

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,20 @@ export const VirtualizedRows = {
     data: repeatToLength(exampleData, 1_000),
   },
 } satisfies Story;
+
+export const VirtualizedRowsGrouped = {
+  args: {
+    columns: [
+      ...exampleColumns,
+      tableColumn.text({
+        headerLabel: "Group",
+        accessor: "group",
+      }),
+    ] as const,
+    groupBy: "group",
+    stickyHeaders: true,
+    height: { custom: 340 },
+    virtualizeRows: true,
+    data: repeatToLength(exampleData, 1_000),
+  },
+} satisfies Story;