feat: table virtualization

.changeset/quiet-students-allow.md

@@ -0,0 +1,5 @@
+---
+'@razorpay/blade': minor
+---
+
+feat(blade): add support for table virtualization

packages/blade/codemods/aicodemod/knowledge/Table.md

@@ -594,3 +594,68 @@ const TableComponent: StoryFn<typeof Table> = ({ ...args }) => {
   );
 };
 ```
+
+# Virtualized Table
+
+Virtaulized table is a table component that renders only the visible rows and columns. This is useful when you have a large dataset and you want to render only the visible rows and columns to improve the performance of the table.
+
+Out implementation of virtualized table is an wrapper on top of react-table-library 's implementation. It provides a simple API to create a virtualized table.
+
+## Props
+
+most of props are same as Table component. we have added following table component.
+
+```ts
+
+isVirtualized = false, // default value is false , it is used to enable virtualization in table
+
+ref = React.Ref<HTMLDivElement> | undefined, // ref to the table container  , since in virtualized table we need to calculate the height and width of the table to render only the visible rows and columns
+```
+but their is a change in children prop of Table component. In virtualized table we need to pass a component named TableVirtulized  that  takes TableHeader, TableBody components. 
+VirtualizedTable is a wrapper on top of react-table-library's [Virtualized](https://github.com/table-library/react-table-library/blob/master/src/virtualized/Virtualized.tsx) component. It provides a simple API to create a virtualized table.
+
+
+```ts
+type VirtualizedWrapperProps<Item> = {
+  /**
+   * * @example
+    *     <TableVirtulized
+   *        tableData={tableData}
+   *        rowHeight={(item, index) => {
+   *          return  57.5;
+   *        }}
+   *      >
+   *       
+   *        <Table tableData={tableData} >
+   *          {(tableData) => (
+   *           <TableVirtualizedContainer tableData={tableData}>
+   *              <TableHeader>
+   *                <TableHeaderRow>
+   *                </TableHeaderRow>
+   *              </TableHeader>           
+   *              <TableBody>
+   *                 {(tableItem, index) => <TableRow key={index} item={tableItem} />}
+   *               </TableBody>
+   *             </TableVirtualizedContainer>
+   *          )}
+   *          </Table>
+   *     </TableVirtulized>
+   *
+   **/
+  /**
+  /**
+   *
+   */
+  tableData: TableNode<Item>[];
+  /**
+   * should be a function that returns the height of the row
+   * index 0 is the header height
+   **/
+  rowHeight: RowHeight;
+  /**
+   *  should contain the TableHeader and TableBody components
+   **/
+  children: React.ReactNode;  
+};
+
+```

packages/blade/src/components/SpotlightPopoverTour/docs/TourDocs.tsx

@@ -1,3 +1,4 @@
+//ignore file for ts check
 import React from 'react';
 import { BasicExample } from './examples';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';

packages/blade/src/components/Table/Table.web.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { forwardRef, useCallback, useEffect, useMemo } from 'react';
 import { Table as ReactTable } from '@table-library/react-table-library/table';
 import { useTheme as useTableTheme } from '@table-library/react-table-library/theme';
 import type { MiddlewareFunction } from '@table-library/react-table-library/types/common';
@@ -28,6 +28,8 @@ import type {
   TablePaginationType,
   TableHeaderRowProps,
 } from './types';
+import { getTableBodyStyles } from './commonStyles';
+import type { BladeElementRef } from '~utils/types';
 import { makeBorderSize, makeMotionTime } from '~utils';
 import { getComponentId, isValidAllowedChildren } from '~utils/isValidAllowedChildren';
 import { throwBladeError } from '~utils/logger';
@@ -56,8 +58,29 @@ const rowSelectType: Record<
 // Get the number of TableHeaderCell components.
 // This is very complicated but the only way to iterate through the structure and get number of header cells.
 // Assuming number of header cells is the same as number of columns
-const getTableHeaderCellCount = (children: (data: []) => React.ReactElement): number => {
+const getTableHeaderCellCount = (
+  children: (data: []) => React.ReactElement,
+  isVirtualized: boolean,
+): number => {
   const tableRootComponent = children([]);
+  if (isVirtualized) {
+    if (
+      React.isValidElement<{ header?: () => React.ReactElement }>(tableRootComponent) &&
+      tableRootComponent?.props.header
+    ) {
+      if (React.isValidElement(tableRootComponent?.props.header())) {
+        const tableHeaderRow = tableRootComponent.props.header().props.children;
+        if (
+          React.isValidElement<{ children?: React.ReactNode }>(tableHeaderRow) &&
+          tableHeaderRow.props.children
+        ) {
+          const tableHeaderCells = React.Children.toArray(tableHeaderRow.props.children);
+          return tableHeaderCells.length;
+        }
+      }
+    }
+  }
+
   if (tableRootComponent && React.isValidElement(tableRootComponent)) {
     const tableComponentArray = React.Children.toArray(tableRootComponent);
     if (React.isValidElement(tableComponentArray[0])) {
@@ -87,21 +110,42 @@ const getTableHeaderCellCount = (children: (data: []) => React.ReactElement): nu
   return 0;
 };
 
-const StyledReactTable = styled(ReactTable)<{ $styledProps?: { height?: BoxProps['height'] } }>(
-  ({ $styledProps }) => {
-    const { theme } = useTheme();
-    const styledPropsCSSObject = getBaseBoxStyles({
-      theme,
-      height: $styledProps?.height,
-    });
+const StyledReactTable = styled(ReactTable)<{
+  $styledProps?: {
+    height?: BoxProps['height'];
+    width?: BoxProps['width'];
+    isVirtualized?: boolean;
+    isSelectable?: boolean;
+    showStripedRows?: boolean;
+  };
+}>(({ $styledProps }) => {
+  const { theme } = useTheme();
+  const styledPropsCSSObject = getBaseBoxStyles({
+    theme,
+    height: $styledProps?.height,
+    ...($styledProps?.isVirtualized && {
+      width: $styledProps?.width,
+    }),
+  });
+  const $isSelectable = $styledProps?.isSelectable;
+  const $showStripedRows = $styledProps?.showStripedRows;
 
-    return {
-      '&&&': {
-        ...styledPropsCSSObject,
-      },
-    };
-  },
-);
+  return {
+    '&&&': {
+      ...styledPropsCSSObject,
+    },
+    ...($styledProps?.isVirtualized
+      ? getTableBodyStyles({
+          isVirtualized: $styledProps?.isVirtualized,
+          theme,
+          height: $styledProps?.height,
+          width: $styledProps?.width,
+          isSelectable: $isSelectable,
+          showStripedRows: $showStripedRows,
+        })
+      : null),
+  };
+});
 
 const RefreshWrapper = styled(BaseBox)<{
   isRefreshSpinnerVisible: boolean;
@@ -120,29 +164,33 @@ const RefreshWrapper = styled(BaseBox)<{
   };
 });
 
-const _Table = <Item,>({
-  children,
-  data,
-  multiSelectTrigger = 'row',
-  selectionType = 'none',
-  onSelectionChange,
-  isHeaderSticky,
-  isFooterSticky,
-  isFirstColumnSticky,
-  rowDensity = 'normal',
-  onSortChange,
-  sortFunctions,
-  toolbar,
-  pagination,
-  height,
-  showStripedRows,
-  gridTemplateColumns,
-  isLoading = false,
-  isRefreshing = false,
-  showBorderedCells = false,
-  defaultSelectedIds = [],
-  ...rest
-}: TableProps<Item>): React.ReactElement => {
+const _Table = <Item,>(
+  {
+    children,
+    data,
+    multiSelectTrigger = 'row',
+    selectionType = 'none',
+    onSelectionChange,
+    isHeaderSticky,
+    isFooterSticky,
+    isFirstColumnSticky,
+    rowDensity = 'normal',
+    onSortChange,
+    sortFunctions,
+    toolbar,
+    pagination,
+    height,
+    showStripedRows,
+    gridTemplateColumns,
+    isLoading = false,
+    isRefreshing = false,
+    showBorderedCells = false,
+    defaultSelectedIds = [],
+    isVirtualized = false,
+    ...rest
+  }: TableProps<Item>,
+  ref: React.Ref<BladeElementRef> | undefined,
+): React.ReactElement => {
   const { theme } = useTheme();
   const [selectedRows, setSelectedRows] = React.useState<TableNode<unknown>['id'][]>(
     selectionType !== 'none' ? defaultSelectedIds : [],
@@ -156,8 +204,13 @@ const _Table = <Item,>({
     undefined,
   );
   const [hasHoverActions, setHasHoverActions] = React.useState(false);
+  const [VirtualizedTableDimensions, setVirtualizedTableDimensions] = React.useState({
+    width: 0,
+    height: 0,
+  });
+
   // Need to make header is sticky if first column is sticky otherwise the first header cell will not be sticky
-  const shouldHeaderBeSticky = isHeaderSticky ?? isFirstColumnSticky;
+  const shouldHeaderBeSticky = isVirtualized ?? isHeaderSticky ?? isFirstColumnSticky;
   const backgroundColor = tableBackgroundColor;
 
   const isMobile = useIsMobile();
@@ -173,7 +226,7 @@ const _Table = <Item,>({
   });
 
   // Table Theme
-  const columnCount = getTableHeaderCellCount(children);
+  const columnCount = getTableHeaderCellCount(children, isVirtualized);
   const firstColumnStickyHeaderCellCSS = isFirstColumnSticky
     ? `
   &:nth-of-type(1) {
@@ -259,13 +312,36 @@ const _Table = <Item,>({
     `,
   });
 
+  useEffect(() => {
+    if (ref && 'current' in ref && ref.current && !height) {
+      if (ref?.current) {
+        const { width, height } = (ref.current as HTMLElement).getBoundingClientRect();
+        setVirtualizedTableDimensions({ width, height });
+      }
+
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const { width } = entry.contentRect;
+          setVirtualizedTableDimensions((prev) => ({ ...prev, width }));
+        }
+      });
+      if (ref && 'current' in ref && ref.current) {
+        resizeObserver.observe(ref.current as HTMLElement);
+      }
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+    return undefined;
+  }, [height, ref]);
+
   useEffect(() => {
     // Get the total number of items
     setTotalItems(data.nodes.length);
   }, [data.nodes]);
 
   // Selection Logic
-  const onSelectChange: MiddlewareFunction = (action, state): void => {
+  const onSelectChange: MiddlewareFunction = (_, state): void => {
     const selectedIds: Identifier[] = state.id ? [state.id] : state.ids ?? [];
     setSelectedRows(selectedIds);
     onSelectionChange?.({
@@ -323,7 +399,7 @@ const _Table = <Item,>({
   );
 
   // Sort Logic
-  const handleSortChange: MiddlewareFunction = (action, state) => {
+  const handleSortChange: MiddlewareFunction = (_, state) => {
     onSortChange?.({
       sortKey: state.sortKey,
       isSortReversed: state.reverse,
@@ -434,6 +510,9 @@ const _Table = <Item,>({
       showBorderedCells,
       hasHoverActions,
       setHasHoverActions,
+      columnCount,
+      gridTemplateColumns,
+      isVirtualized,
     }),
     [
       selectionType,
@@ -442,8 +521,10 @@ const _Table = <Item,>({
       toggleRowSelectionById,
       toggleAllRowsSelection,
       deselectAllRows,
+      gridTemplateColumns,
       rowDensity,
       toggleSort,
+      columnCount,
       currentSortedState,
       setPaginationPage,
       setPaginationRowSize,
@@ -459,6 +540,7 @@ const _Table = <Item,>({
       showBorderedCells,
       hasHoverActions,
       setHasHoverActions,
+      isVirtualized,
     ],
   );
 
@@ -484,6 +566,7 @@ const _Table = <Item,>({
           position="relative"
           {...getStyledProps(rest)}
           {...metaAttribute({ name: MetaConstants.Table })}
+          width={isVirtualized ? `${VirtualizedTableDimensions.width}px` : undefined}
         >
           {isRefreshSpinnerMounted && (
             <RefreshWrapper
@@ -504,15 +587,19 @@ const _Table = <Item,>({
           )}
           {toolbar}
           <StyledReactTable
-            role="table"
+            role={isVirtualized ? 'grid' : 'table'}
             layout={{ fixedHeader: shouldHeaderBeSticky, horizontalScroll: true }}
             data={data}
             // @ts-expect-error ignore this, theme clashes with styled-component's theme. We're using useTheme from blade to get actual theme
             theme={tableTheme}
             select={selectionType !== 'none' ? rowSelectConfig : null}
             sort={sortFunctions ? sort : null}
             $styledProps={{
-              height,
+              height: isVirtualized ? height || `${VirtualizedTableDimensions.height}px` : height,
+              width: isVirtualized ? `${VirtualizedTableDimensions.width}px` : undefined,
+              isVirtualized,
+              isSelectable: selectionType !== 'none',
+              showStripedRows,
             }}
             pagination={hasPagination ? paginationConfig : null}
             {...makeAccessible({ multiSelectable: selectionType === 'multiple' })}
@@ -527,9 +614,15 @@ const _Table = <Item,>({
     </TableContext.Provider>
   );
 };
-
-const Table = assignWithoutSideEffects(_Table, {
-  componentId: ComponentIds.Table,
-});
+const Table = assignWithoutSideEffects(
+  forwardRef(_Table) as <Item>(
+    // https://oida.dev/typescript-react-generic-forward-refs/
+    // https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
+    props: TableProps<Item> & { ref?: React.ForwardedRef<BladeElementRef> },
+  ) => React.ReactElement,
+  {
+    componentId: ComponentIds.Table,
+  },
+);
 
 export { Table };

packages/blade/src/components/Table/TableBody.native.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import type { TableBodyProps, TableCellProps, TableRowProps } from './types';
 import { Text } from '~components/Typography';
 
-const TableBody = (props: TableBodyProps): React.ReactElement => {
+const TableBody = <Item,>(props: TableBodyProps<Item>): React.ReactElement => {
   return <Text>Table Component is not available for Native mobile apps.</Text>;
 };