feat: table virtualization

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

@@ -619,55 +619,30 @@ VirtualizedTable is a wrapper on top of react-table-library's [Virtualized](http
 type VirtualizedWrapperProps<Item> = {
   /**
    * * @example
-   *     <TableVirtulized
+    *     <TableVirtulized
    *        tableData={tableData}
    *        rowHeight={(item, index) => {
-   *          // header height and row height
-   *          return index === 0 ? 50 : 57.5;
+   *          return  57.5;
    *        }}
-   *        header={() => (
-   *          <TableHeader>
-   *            <TableHeaderRow>
-   *               <TableHeaderCell>ID</TableHeaderCell>
-   *               <TableHeaderCell>Amount</TableHeaderCell>
-   *               <TableHeaderCell>Account</TableHeaderCell>
-   *               <TableHeaderCell>Date</TableHeaderCell>
-   *               <TableHeaderCell>Method</TableHeaderCell>
-   *               <TableHeaderCell>Status</TableHeaderCell>
-   *            </TableHeaderRow>
-   *          </TableHeader>
-   *        )}
-   *        body={(tableItem, index) => (
-   *          <TableRow key={index} item={tableItem}>
-   *            <TableCell>
-   *              <Code size="medium">{tableItem.paymentId}</Code>
-   *            </TableCell>
-   *            <TableCell>
-   *              <Amount value={tableItem.amount} />
-   *            </TableCell>
-   *            <TableCell>{tableItem.account}</TableCell>
-   *            <TableCell>
-   *              <Text>{tableItem.date}</Text>
-   *            </TableCell>
-   *            <TableCell>{tableItem.method}</TableCell>
-   *            <TableCell>{tableItem.status}</TableCell>
-   *          </TableRow>
-   *        )}
-   *     />
+   *      >
+   *       
+   *        <Table tableData={tableData} >
+   *          {(tableData) => (
+   *           <TableVirtualizedContainer tableData={tableData}>
+   *              <TableHeader>
+   *                <TableHeaderRow>
+   *                </TableHeaderRow>
+   *              </TableHeader>           
+   *              <TableBody>
+   *                 {(tableItem, index) => <TableRow key={index} item={tableItem} />}
+   *               </TableBody>
+   *             </TableVirtualizedContainer>
+   *          )}
+   *          </Table>
+   *     </TableVirtulized>
    *
    **/
   /**
-   *
-   *  should be a function that returns TableHeader,
-   *
-   **/
-  header: () => React.ReactElement;
-  /**
-   *
-   *  should be a function that returns TableBody
-   *
-   * */
-  body: (tableItem: TableNode<Item>, index: number) => React.ReactElement;
   /**
    *
    */
@@ -677,6 +652,10 @@ type VirtualizedWrapperProps<Item> = {
    * index 0 is the header height
    **/
   rowHeight: RowHeight;
+  /**
+   *  should contain the TableHeader and TableBody components
+   **/
+  children: React.ReactNode;  
 };
 
 ```

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

@@ -134,16 +134,16 @@ const StyledReactTable = styled(ReactTable)<{
     '&&&': {
       ...styledPropsCSSObject,
     },
-    ...($styledProps?.isVirtualized && {
-      ...getTableBodyStyles({
-        isVirtualized: $styledProps?.isVirtualized,
-        theme,
-        height: $styledProps?.height,
-        width: $styledProps?.width,
-        isSelectable: $isSelectable,
-        showStripedRows: $showStripedRows,
-      }),
-    }),
+    ...($styledProps?.isVirtualized
+      ? getTableBodyStyles({
+          isVirtualized: $styledProps?.isVirtualized,
+          theme,
+          height: $styledProps?.height,
+          width: $styledProps?.width,
+          isSelectable: $isSelectable,
+          showStripedRows: $showStripedRows,
+        })
+      : null),
   };
 });
 
@@ -210,7 +210,7 @@ const _Table = <Item,>(
   });
 
   // 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();
@@ -484,14 +484,6 @@ const _Table = <Item,>(
     }
   }
 
-  if (selectionType !== 'none' && hasHoverActions && __DEV__) {
-    // their is no point of using hover actions with selectionType
-    throwBladeError({
-      message: 'Consider removing hover actions when selectionType is set',
-      moduleName: 'Table',
-    });
-  }
-
   // Table Context
   const tableContext: TableContextType = useMemo(
     () => ({
@@ -596,7 +588,7 @@ const _Table = <Item,>(
           {toolbar}
           <StyledReactTable
             role={isVirtualized ? 'grid' : 'table'}
-            layout={{ fixedHeader: true, horizontalScroll: true }}
+            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}

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>;
 };
 

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

@@ -12,6 +12,8 @@ import type {
   TableCellProps,
   TableBackgroundColors,
   VirtualizedWrapperProps,
+  RowHeightType,
+  TableNode,
 } from './types';
 import { getTableActionsHoverStyles, getTableRowBackgroundTransition } from './utils';
 import { getTableBodyStyles } from './commonStyles';
@@ -28,7 +30,6 @@ import { size } from '~tokens/global';
 import { makeAccessible } from '~utils/makeAccessible';
 import { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';
 import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';
-
 const StyledBody = styled(Body)<{
   $isSelectable: boolean;
   $showStripedRows: boolean;
@@ -57,7 +58,7 @@ const StyledBody = styled(Body)<{
   };
 });
 
-const _TableBody = ({ children, ...rest }: TableBodyProps): React.ReactElement => {
+const _TableBody = <Item,>({ children, ...rest }: TableBodyProps<Item>): React.ReactElement => {
   const { showStripedRows, selectionType } = useTableContext();
   const isSelectable = selectionType !== 'none';
 
@@ -221,13 +222,13 @@ const StyledRow = styled(Row)<{
             borderRightColor: getIn(theme.colors, tableRow.borderColor),
           }
         : undefined,
-      [`& td:last-child .cell-wrapper`]: {
+      '& td:last-child .cell-wrapper': {
         borderRight: 'none',
       },
       ...(hasHoverActions
         ? {
             [`@media ${getMediaQuery({ min: theme.breakpoints.m })}`]: {
-              [`& td:last-child`]: {
+              '& td:last-child': {
                 opacity: 0,
                 position: 'sticky',
                 zIndex: 2,
@@ -237,14 +238,14 @@ const StyledRow = styled(Row)<{
                   overflow: 'visible',
                 },
               },
-              [`& td:last-child:focus-within`]: {
+              '& td:last-child:focus-within': {
                 opacity: 1,
                 ...getTableActionsHoverStyles({
                   theme,
                   hoverColor: tableRow.nonStripe.backgroundColor,
                 }),
               },
-              [`&:hover td:last-child`]: {
+              '&:hover td:last-child': {
                 opacity: 1,
               },
             },
@@ -276,11 +277,6 @@ const StyledRow = styled(Row)<{
           transition: rowBackgroundTransition,
           backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorActive),
           cursor: 'pointer',
-          ...getTableActionsHoverStyles({
-            hoverColor: tableRow.nonStripe.backgroundColorActive,
-            backgroundGradientColor: tableRow.nonStripe.backgroundColorHover,
-            theme,
-          }),
         },
       }),
       '&:focus': getFocusRingStyles({ theme, negativeOffset: true }),
@@ -387,12 +383,36 @@ const _TableRow = <Item,>({
 };
 
 const _Virtulized = <Item,>({
-  header,
-  body,
   tableData,
   rowHeight,
+  children,
 }: VirtualizedWrapperProps<Item>): React.ReactElement => {
-  return <Virtualized tableList={tableData} rowHeight={rowHeight} header={header} body={body} />;
+  const [parsedHeader = null, parsedBody = null] = React.Children.toArray(children);
+  const { rowDensity } = useTableContext();
+  const headerHeight = Number(tableRow.minHeight[rowDensity]);
+  console.log('rowDensity', rowDensity);
+  console.log('headerHeight', headerHeight);
+
+  const _rowHeight = (item: TableNode<Item>, index: number): number => {
+    return index === 0 ? headerHeight : rowHeight(item, index);
+  };
+
+  const bodyFunction =
+    React.isValidElement(parsedBody) &&
+    parsedBody.props &&
+    typeof parsedBody.props === 'object' &&
+    'children' in parsedBody.props
+      ? parsedBody.props.children
+      : null;
+
+  return (
+    <Virtualized
+      tableList={tableData}
+      rowHeight={_rowHeight as RowHeightType}
+      header={() => parsedHeader}
+      body={bodyFunction as (node: Item, index: number) => React.ReactNode}
+    />
+  );
 };
 
 const TableRow = assignWithoutSideEffects(_TableRow, {

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

@@ -1226,56 +1226,60 @@ describe('<Table />', () => {
               <VirtulizedWrapper
                 tableData={tableData}
                 rowHeight={(item, index) => {
-                  // header height and row height
-                  return index === 0 ? 50 : 57.5;
+                  console.log({
+                    item,
+                    index,
+                  });
+                  return 57.5;
                 }}
-                header={() => (
-                  <TableHeader>
-                    <TableHeaderRow>
-                      <TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
-                      <TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
-                      <TableHeaderCell headerKey="METHOD">Method</TableHeaderCell>
-                      <TableHeaderCell headerKey="STATUS">Status </TableHeaderCell>
-                    </TableHeaderRow>
-                  </TableHeader>
-                )}
-                body={(tableItem, index) => (
-                  <TableRow
-                    key={index}
-                    item={tableItem}
-                    onClick={() => {
-                      console.log('where');
-                    }}
-                  >
-                    <TableCell>
-                      <Code size="medium">{tableItem.paymentId}</Code>
-                    </TableCell>
-                    <TableEditableCell
-                      accessibilityLabel="Amount"
-                      placeholder="Enter text"
-                      successText="Amount is valid"
-                    />
+              >
+                <TableHeader>
+                  <TableHeaderRow>
+                    <TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
+                    <TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
+                    <TableHeaderCell headerKey="METHOD">Method</TableHeaderCell>
+                    <TableHeaderCell headerKey="STATUS">Status </TableHeaderCell>
+                  </TableHeaderRow>
+                </TableHeader>
+                <TableBody<Item>>
+                  {(tableItem, index) => (
+                    <TableRow
+                      key={index}
+                      item={tableItem}
+                      onClick={() => {
+                        console.log('where');
+                      }}
+                    >
+                      <TableCell>
+                        <Code size="medium">{tableItem.paymentId}</Code>
+                      </TableCell>
+                      <TableEditableCell
+                        accessibilityLabel="Amount"
+                        placeholder="Enter text"
+                        successText="Amount is valid"
+                      />
 
-                    <TableCell>{tableItem.method}</TableCell>
-                    <TableCell>
-                      <Badge
-                        size="medium"
-                        color={
-                          tableItem.status === 'Completed'
-                            ? 'positive'
-                            : tableItem.status === 'Pending'
-                            ? 'notice'
-                            : tableItem.status === 'Failed'
-                            ? 'negative'
-                            : 'primary'
-                        }
-                      >
-                        {tableItem.status}
-                      </Badge>
-                    </TableCell>
-                  </TableRow>
-                )}
-              />
+                      <TableCell>{tableItem.method}</TableCell>
+                      <TableCell>
+                        <Badge
+                          size="medium"
+                          color={
+                            tableItem.status === 'Completed'
+                              ? 'positive'
+                              : tableItem.status === 'Pending'
+                              ? 'notice'
+                              : tableItem.status === 'Failed'
+                              ? 'negative'
+                              : 'primary'
+                          }
+                        >
+                          {tableItem.status}
+                        </Badge>
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </VirtulizedWrapper>
             )}
           </Table>
         </Box>