chore: add isVirtualized prop

Author: tewarig

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

@@ -478,7 +478,7 @@ const _Table = forwardRef(
         console.log('Parent dimensions:', { width, height });
         // You can use the width and height to set your table dimensions
       }
-    }, [ref]);
+    }, [height, ref, width]);
 
     useEffect(() => {
       // Get the total number of items
@@ -657,6 +657,7 @@ const _Table = forwardRef(
         setHasHoverActions,
         columnCount,
         gridTemplateColumns,
+        isVirtualized,
       }),
       [
         selectionType,
@@ -684,6 +685,7 @@ const _Table = forwardRef(
         showBorderedCells,
         hasHoverActions,
         setHasHoverActions,
+        isVirtualized,
       ],
     );
 
@@ -696,7 +698,7 @@ const _Table = forwardRef(
             alignItems="center"
             justifyContent="center"
             height={height}
-            width={width}
+            width={isVirtualized ? width : undefined}
             {...getStyledProps(rest)}
             {...metaAttribute({ name: MetaConstants.Table })}
             {...makeAnalyticsAttribute(rest)}
@@ -710,7 +712,7 @@ const _Table = forwardRef(
             position="relative"
             {...getStyledProps(rest)}
             {...metaAttribute({ name: MetaConstants.Table })}
-            width={width || `${VirtualizedTableDimensions.width}px`}
+            width={isVirtualized ? width || `${VirtualizedTableDimensions.width}px` : undefined}
           >
             {isRefreshSpinnerMounted && (
               <RefreshWrapper
@@ -740,7 +742,7 @@ const _Table = forwardRef(
               sort={sortFunctions ? sort : null}
               $styledProps={{
                 height: height || `${VirtualizedTableDimensions.height}px`,
-                width: width || `${VirtualizedTableDimensions.width}px`,
+                width: isVirtualized ? width || `${VirtualizedTableDimensions.width}px` : undefined,
                 isVirtualized,
                 isSelectable: selectionType !== 'none',
                 showStripedRows,

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

@@ -42,6 +42,7 @@ export type TableContextType = {
   setHasHoverActions: (hasHoverActions: boolean) => void;
   columnCount: number;
   gridTemplateColumns: string | undefined;
+  isVirtualized?: boolean;
 };
 
 const TableContext = React.createContext<TableContextType>({
@@ -70,6 +71,7 @@ const TableContext = React.createContext<TableContextType>({
   setHasHoverActions: () => {},
   columnCount: 0,
   gridTemplateColumns: undefined,
+  isVirtualized: false,
 });
 
 const useTableContext = (): TableContextType => {

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

@@ -213,6 +213,7 @@ const StyledHeaderRow = styled(HeaderRow)<{
   $hasHoverActions: boolean;
   $selectionType: TableProps<unknown>['selectionType'];
   $columnCount: number;
+  $isVirtualized?: boolean;
 }>(
   ({
     theme,
@@ -221,21 +222,23 @@ const StyledHeaderRow = styled(HeaderRow)<{
     $hasHoverActions,
     $selectionType,
     $columnCount,
+    $isVirtualized,
   }) => ({
     '& th': $showBorderedCells
       ? {
           borderRightWidth: makeSpace(getIn(theme.border.width, tableRow.borderBottomWidth)),
           borderRightColor: getIn(theme.colors, tableRow.borderColor),
           borderRightStyle: 'solid',
-          //TODO: add check to only add this for virtalized tables
-          display: 'grid',
-          gridTemplateColumns: $gridTemplateColumns
-            ? `${$gridTemplateColumns} ${$hasHoverActions ? 'min-content' : ''}`
-            : ` ${
-                $selectionType === 'multiple' ? 'min-content' : ''
-              } repeat(${$columnCount},minmax(100px, 1fr)) ${
-                $hasHoverActions ? 'min-content' : ''
-              } !important;`,
+          ...($isVirtualized && {
+            display: 'grid',
+            gridTemplateColumns: $gridTemplateColumns
+              ? `${$gridTemplateColumns} ${$hasHoverActions ? 'min-content' : ''}`
+              : ` ${
+                  $selectionType === 'multiple' ? 'min-content' : ''
+                } repeat(${$columnCount},minmax(100px, 1fr)) ${
+                  $hasHoverActions ? 'min-content' : ''
+                } !important;`,
+          }),
         }
       : undefined,
     '& th:last-child ': {
@@ -260,6 +263,7 @@ const _TableHeaderRow = ({
     hasHoverActions,
     gridTemplateColumns,
     columnCount,
+    isVirtualized,
   } = useTableContext();
   const isMultiSelect = selectionType === 'multiple';
   const isAllSelected = selectedRows && selectedRows.length === totalItems;
@@ -285,6 +289,7 @@ const _TableHeaderRow = ({
       $hasHoverActions={hasHoverActions}
       $selectionType={selectionType}
       $columnCount={columnCount}
+      $isVirtualized={isVirtualized}
     >
       {isMultiSelect && (
         <TableHeaderCellCheckbox