playbook_ui 14.21.2.pre.alpha.PLAY2020sidebarfilterPOC8265 → 14.21.2.pre.alpha.PLAY2179playbookiconsupdate8389

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 110027cf4b6fc7f41901f5d8a95eeee3cabd472a0f64d95870e83cac6155d44f
-  data.tar.gz: 96c09cbb3a87483920bfd554a727e6663767bc3447cc2e363af5adcb09d6a5c7
+  metadata.gz: 0bd6938603e3b7ea37cd0dfa7a480f3ee6f27a9df349325f0f755ffe5254fd5c
+  data.tar.gz: c7d9933a4f2fd4b525d4b570d47ff79274f2a3ddecf7b0f42273b09f9b45c31f
 SHA512:
-  metadata.gz: 14c26029d6c5254a2f62b2ea222c4cd5d06ffb3e6586d36d506dfaeed57c4f824e41418e9ce5533838e720d94c1257bace7f55a78da5a2d6ee6dd6768d066fdf
-  data.tar.gz: 0cd5c076dfb211d337b2de733d3b4a94b09c208b00261b74bcd2eeae88c255b59cd6849025ad1f3548be3f1a910244d6b8e6f689dd413b210a8903855b656a90
+  metadata.gz: a8a312ffe4b64d4c8022434a53a616a1d5dc764a84d9f61ffab69117a2039dbe56ce674e71a561019a71e1be09014c858e85e252db2cfe59e20d212eb68e9487
+  data.tar.gz: edb82b3cf90dac74c811461b13bce6c530382efaed70ca641c1214bcc1d25cd5781debe9d8f79748f936fbc402f1eff7823fa36c125d013b4be49dd223576632

data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx

@@ -19,6 +19,7 @@ interface CustomCellProps {
   value?: string
   customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
   selectableRows?: boolean
+  customStyle?: GenericObject
 } 
 
 export const CustomCell = ({
@@ -28,6 +29,7 @@ export const CustomCell = ({
   value,
   customRenderer,
   selectableRows,
+  customStyle = {},
 }: CustomCellProps & GlobalProps) => {
   const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows } = useContext(AdvancedTableContext);
 
@@ -43,11 +45,11 @@ export const CustomCell = ({
   const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
 
   return (
-    <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
+    <div style={{ paddingLeft: `${row.depth * 1.25}em`}}>
       <Flex 
           alignItems="center" 
           columnGap="xs"
-          justify={"start"}
+          justify="start"
           orientation="row"
       >
         {
@@ -65,6 +67,7 @@ export const CustomCell = ({
           <button
               className="gray-icon expand-toggle-icon"
               onClick={() => handleOnExpand(row)}
+              style={{ color: customStyle?.expandButtonColor }}
           >
             {row.getIsExpanded() ? (
               <Icon cursor="pointer"

data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx

@@ -4,6 +4,7 @@ import { flexRender, Row, Cell } from "@tanstack/react-table"
 
 import { GenericObject } from "../../types"
 import { isChrome } from "../Utilities/BrowserCheck"
+import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -25,13 +26,17 @@ const TableCellRenderer = ({
   collapsibleTrail = true,
   loading = false,
   stickyLeftColumn,
-  columnPinning
+  columnPinning,
+  customRowStyle,
+  columnDefinitions,
 }: {
   row: Row<GenericObject>
   collapsibleTrail?: boolean
   loading?: boolean | string
   stickyLeftColumn?: string[]
   columnPinning: { left: string[] }
+  customRowStyle?: GenericObject
+  columnDefinitions?: {[key:string]:any}[]
 }) => {
   return (
     <>
@@ -49,10 +54,14 @@ const TableCellRenderer = ({
         })();
 
         const { column } = cell;
-        
+
+        // Find the “owning” colDefinition by accessor. Needed for multi column logic
+        const colDef = findColumnDefByAccessor(columnDefinitions ?? [], column.id)
+        const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
+
         return (
           <td
-              align="right"
+              align={cellAlignment}
               className={classnames(
                 `${cell.id}-cell position_relative`,
                 isChrome() ? "chrome-styles" : "",
@@ -67,6 +76,8 @@ const TableCellRenderer = ({
                     ? '180px'
                     : `${column.getStart("left")}px`
                   : undefined,
+                  backgroundColor: i === 0 && customRowStyle?.backgroundColor,
+                  color: customRowStyle?.fontColor,
             }}
           >
             {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
@@ -100,6 +111,7 @@ export const RegularTableView = ({
     pinnedRows,
     headerHeight,
     rowHeight,
+    rowStyling = [],
     sampleRowRef,
   } = useContext(AdvancedTableContext)
 
@@ -117,7 +129,6 @@ export const RegularTableView = ({
 
   const columnPinning = table.getState().columnPinning || { left: [] };
   const columnDefinitions = table.options.meta?.columnDefinitions || [];
-
   // Row pinning
   function PinnedRow({ row }: { row: Row<any> }) {
     return (
@@ -137,6 +148,7 @@ export const RegularTableView = ({
       >
         <TableCellRenderer
             collapsibleTrail={collapsibleTrail}
+            columnDefinitions={columnDefinitions}
             columnPinning={columnPinning}
             loading={loading}
             row={row}
@@ -164,6 +176,7 @@ export const RegularTableView = ({
         const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
         const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
         const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
+        const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
 
         return (
           <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
@@ -182,6 +195,7 @@ export const RegularTableView = ({
                 className={`${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
                 id={`${row.index}-${row.id}-${row.depth}-row`}
                 ref={isFirstRegularRow ? sampleRowRef : null}
+                style={{backgroundColor: customRowStyle?.backgroundColor, color: customRowStyle?.fontColor}}
             >
               {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
               {selectableRows && !hasAnySubRows && (
@@ -197,7 +211,9 @@ export const RegularTableView = ({
               )}
               <TableCellRenderer
                   collapsibleTrail={collapsibleTrail}
+                  columnDefinitions={columnDefinitions}
                   columnPinning={columnPinning}
+                  customRowStyle={customRowStyle}
                   loading={loading}
                   row={row}
                   stickyLeftColumn={stickyLeftColumn}

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -15,6 +15,7 @@ import Icon from "../../pb_icon/_icon"
 import { SortIconButton } from "./SortIconButton"
 import { ToggleIconButton } from "./ToggleIconButton"
 import { displayIcon } from "../Utilities/IconHelpers"
+import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
 import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers"
 
 import { isChrome } from "../Utilities/BrowserCheck"
@@ -45,6 +46,7 @@ export const TableHeaderCell = ({
   table
 }: TableHeaderCellProps) => {
   const {
+    columnDefinitions,
     expanded,
     setExpanded,
     expandByDepth,
@@ -72,6 +74,18 @@ export const TableHeaderCell = ({
       header?.column.getToggleSortingHandler()(event)
     }
   }
+  const alignmentMap: Record<string, "start" | "center" | "end"> = {
+    left: "start",
+    center: "center",
+    right: "end",
+  };
+
+ // Look up the “owning” columnDefinition by accessor. Needed for multi column logic
+ const colDef = header
+   ? findColumnDefByAccessor(columnDefinitions, header.column.id)
+   : undefined
+
+ const headerAlignment =   colDef?.columnStyling?.headerAlignment ?? colDef?.columnStyling?.headerAligment
 
   const isLeafColumn =
   header?.column.getLeafColumns().length === 1 &&
@@ -126,9 +140,15 @@ const isToggleExpansionEnabled =
   (enableToggleExpansion === "all" || "header") &&
   enableToggleExpansion !== "none"
 
-  let justifyHeader:justifyTypes;
+  let justifyHeader: justifyTypes;
 
-  if (header?.index === 0 && hasAnySubRows || (header?.index === 0 && inlineRowLoading) || (header?.index === 0 && isToggleExpansionEnabled)) {
+  if (headerAlignment && alignmentMap[headerAlignment]) {
+    justifyHeader = alignmentMap[headerAlignment];
+  } else if (
+    (header?.index === 0 && hasAnySubRows) ||
+    (header?.index === 0 && inlineRowLoading) ||
+    (header?.index === 0 && isToggleExpansionEnabled)
+  ) {
     justifyHeader = enableSorting ? "between" : "start";
   } else {
     justifyHeader = isLeafColumn ? "end" : "center";
@@ -165,7 +185,7 @@ const isToggleExpansionEnabled =
 
   return (
     <th
-        align="right"
+        align={headerAlignment ? headerAlignment : "right"}
         className={cellClassName}
         colSpan={header?.colSpan}
         id={cellId}
@@ -253,8 +273,8 @@ const isToggleExpansionEnabled =
                     tabIndex: 0,
                   },
                 })}
-              justify={header?.index === 0 && enableSorting ? "between" : "none"}
-              paddingLeft={enableSorting ? "xxs" : "xs"}
+              justify={header?.index === 0 && enableSorting ? "between" : headerAlignment ? alignmentMap[headerAlignment] : "none"}
+              paddingLeft={header?.index === 0 ? enableSorting ? "xxs" : "xs" : "none"}
           >
             <div>
               {flexRender(header?.column.columnDef.header, header?.getContext())}

data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx

@@ -1,6 +1,6 @@
-import React, { useContext, useLayoutEffect, useState, useEffect } from "react"
+import React, { useContext, useLayoutEffect, useState, useEffect, useRef } from "react"
 import classnames from "classnames"
-import { flexRender, Cell } from "@tanstack/react-table"
+import { flexRender, Cell, Row } from "@tanstack/react-table"
 import { VirtualItem } from "@tanstack/react-virtual"
 
 import { GenericObject } from "../../types"
@@ -10,6 +10,8 @@ import { getVirtualizedRowStyle } from "../Utilities/TableContainerStyles"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
+import Detail from "../../pb_detail/_detail"
+import Flex from "../../pb_flex/_flex"
 
 import { SubRowHeaderRow } from "../Components/SubRowHeaderRow"
 import { LoadingCell } from "../Components/LoadingCell"
@@ -20,11 +22,13 @@ import AdvancedTableContext from "../Context/AdvancedTableContext"
 type VirtualizedTableViewProps = {
   collapsibleTrail?: boolean
   subRowHeaders?: string[]
+  isFetching: boolean
 }
 
 export const VirtualizedTableView = ({
   collapsibleTrail = true,
   subRowHeaders,
+  isFetching,
 }: VirtualizedTableViewProps) => {
   const {
     enableToggleExpansion,
@@ -36,6 +40,7 @@ export const VirtualizedTableView = ({
     hasAnySubRows,
     virtualizer,
     flattenedItems,
+    totalAvailableCount,
   } = useContext(AdvancedTableContext)
 
   const columnPinning = table.getState().columnPinning || { left: [] };
@@ -121,19 +126,7 @@ export const VirtualizedTableView = ({
   }
 
   // Get virtual items
-  let virtualItems: VirtualItem[] = [];
-  try {
-    virtualItems = virtualizer.getVirtualItems();
-  } catch (err) {
-    return (
-      <tr>
-        <td colSpan={table.getAllFlatColumns().length || 1}>
-          Error loading virtualized data.
-        </td>
-      </tr>
-    );
-  }
-
+  const virtualItems: VirtualItem[] = virtualizer.getVirtualItems?.() || [];
   if (!virtualItems.length) {
     return (
       <tr>
@@ -143,6 +136,9 @@ export const VirtualizedTableView = ({
       </tr>
     );
   }
+  
+  // Establish # of Parent Rows (so that Footer count does not include every single row)
+  const topLevelRowCount = table.getRowModel().flatRows.filter((row: Row<GenericObject>) => row.depth === 0).length;
 
   return (
     <>
@@ -177,7 +173,7 @@ export const VirtualizedTableView = ({
         if (item.type === 'row') {
           const row = item.row;
           const isExpandable = row.getIsExpanded();
-          const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
+          const rowHasNoChildren = row.original?.children && !row.original.children.length;
           const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
           const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
 
@@ -266,6 +262,30 @@ export const VirtualizedTableView = ({
           );
         }
 
+        if (item.type === 'footer') {
+          // Render footer
+          return (
+            <tr
+                className="virtualized-table-row virtualized-footer"
+                key={`footer-row`}
+                style={virtualItemStyle}
+            >
+              <td colSpan={table.getAllFlatColumns().length}>
+                <Flex align="center"
+                    justify="center"
+                >
+
+                {isFetching ? (
+                  <LoadingInline />
+                ) : (
+                  <Detail text={`Showing ${topLevelRowCount} of ${totalAvailableCount} rows`} />
+                )}
+                </Flex>
+              </td>
+            </tr>
+          )
+        }
+
         return null;
       })}
     </>

data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx

@@ -8,7 +8,7 @@ import { getRowHeightEstimate } from '../Utilities/TableContainerStyles';
 const AdvancedTableContext = createContext<any>({});
 
 interface FlattenedItem {
-    type: 'header' | 'row' | 'loading';
+    type: 'header' | 'row' | 'loading' | 'footer';
     row: Row<GenericObject>;
     id: string;
 }
@@ -116,6 +116,17 @@ export const AdvancedTableProvider = ({ children, ...props }: {
       }
     });
 
+    const isFetching = props.isFetching || false;
+    const shouldAddFooter = table && !isFetching && tableRows.length > 0
+
+    if (shouldAddFooter) {
+      items.push({
+        type: 'footer',
+        row: {} as Row<GenericObject>,
+        id: `footer-row`,
+      });
+    }
+
     return items;
   }, [
     isVirtualized,
@@ -159,10 +170,11 @@ export const AdvancedTableProvider = ({ children, ...props }: {
   useEffect(() => {
     if (isVirtualized && virtualizer && table && containerRef.current) {
       // Force recalculation of all virtual items
+      virtualizer.setOptions({
+        ...virtualizer.options,
+        count: flattenedItems.length,
+      });
       virtualizer.measure();
-
-      // Reset scroll position when sorting changes
-      containerRef.current.scrollTop = 0;
     }
   }, [
     isVirtualized,
@@ -170,7 +182,8 @@ export const AdvancedTableProvider = ({ children, ...props }: {
     table,
     containerRef,
     JSON.stringify(table?.getState().sorting || []),
-    JSON.stringify(table?.getState().expanded || {})
+    JSON.stringify(table?.getState().expanded || {}),
+    flattenedItems.length,
   ]);
 
   const contextValue = {

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Row, RowPinningState } from "@tanstack/react-table";
 import { GenericObject } from "../../types";
 import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers";
@@ -19,13 +19,21 @@ export function useTableActions({
   onRowSelectionChange
 }: UseTableActionsProps) {
 
+  // State to achieve 1 second delay before fetching more rows
+  const [bottomReached, setBottomReached] = useState(false)
+  const bottomTimeout = useRef<NodeJS.Timeout | null>(null)
+
   // Handle expand/collapse
   const handleExpandOrCollapse = useCallback(async (row: Row<GenericObject>) => {
-    onToggleExpansionClick && onToggleExpansionClick(row);
-    const expandedState = expanded;
-    const targetParent = row?.parentId;
-    const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent, undefined);
-    setExpanded(updatedRows);
+    if (onToggleExpansionClick) onToggleExpansionClick(row)
+      const updatedExpandedState = await updateExpandAndCollapseState(
+        table.getRowModel(),
+        expanded,
+        row?.parentId,
+        undefined
+      )
+
+      setExpanded(updatedExpandedState)
   }, [expanded, setExpanded, onToggleExpansionClick, table]);
 
   // Handle pagination
@@ -35,20 +43,32 @@ export function useTableActions({
 
   // Handle scroll detection for infinite scroll/virtualization
   const fetchMoreOnBottomReached = useCallback((
-    containerRefElement: HTMLDivElement | null,
-    fetchNextPage: () => void,
-    isFetching: boolean,
-    totalFetched: number,
-    totalDBRowCount: number
+      containerRef: HTMLDivElement | null,
+      fetchNextPage: () => void,
+      isFetching: boolean,
+      totalFetched: number,
+      totalDBRowCount: number
   ) => {
-    if (containerRefElement) {
-      const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
-      // If user scrolls near bottom, fetch more data
-      if (scrollHeight - scrollTop - clientHeight < 500 && !isFetching && totalFetched < totalDBRowCount) {
-        fetchNextPage();
+    if (!containerRef || isFetching || totalFetched >= totalDBRowCount) return
+    const { scrollTop, scrollHeight, clientHeight } = containerRef
+    const distanceFromBottom = scrollHeight - scrollTop - clientHeight
+    // If user scrolls near bottom, fetch more data after 1 second delay
+    if (distanceFromBottom < 50) {
+      if (!bottomReached) {
+        setBottomReached(true)
+        bottomTimeout.current = setTimeout(() => {
+          fetchNextPage()
+          setBottomReached(false)
+        }, 1000)
+      }
+    } else {
+      setBottomReached(false)
+      if (bottomTimeout.current) {
+        clearTimeout(bottomTimeout.current)
+        bottomTimeout.current = null
       }
     }
-  }, []);
+  },[bottomReached]);
 
   // Update selection state
   useEffect(() => {

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -32,6 +32,7 @@ interface UseTableStateProps {
   tableOptions?: GenericObject;
   onRowSelectionChange?: (arg: RowSelectionState) => void;
   columnVisibilityControl?: GenericObject;
+  rowStyling?: GenericObject;
 }
 
 export function useTableState({
@@ -49,6 +50,7 @@ export function useTableState({
   tableOptions,
   columnVisibilityControl,
   pinnedRows,
+  rowStyling
 }: UseTableStateProps) {
   // Create a local state for expanded and setExpanded if expandedControl not used
   const [localExpanded, setLocalExpanded] = useState({});
@@ -102,7 +104,8 @@ export function useTableState({
           column.customRenderer,
           isFirstColumn,
           onRowToggleClick,
-          selectableRows
+          selectableRows,
+          rowStyling
         );
       }
 
@@ -165,7 +168,7 @@ export function useTableState({
     enableSortingRemoval: false,
     sortDescFirst: true,
     onRowSelectionChange: setRowSelection,
-    getRowId: (selectableRows || pinnedRows) ? row => row.id : undefined,
+    getRowId: (selectableRows || pinnedRows || rowStyling) ? row => row.id : undefined,
     onColumnVisibilityChange: setColumnVisibility,
     meta: {
       columnDefinitions

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx

@@ -16,6 +16,7 @@ type TableBodyProps = {
   dark?: boolean
   id?: string
   subRowHeaders?: string[]
+  isFetching: boolean
 }
 
 export const TableBody = ({
@@ -24,6 +25,7 @@ export const TableBody = ({
   dark = false,
   id,
   subRowHeaders,
+  isFetching,
   ...props
 }: TableBodyProps) => {
 
@@ -63,6 +65,7 @@ export const TableBody = ({
           // Virtualized table view
           <VirtualizedTableView
               collapsibleTrail={collapsibleTrail}
+              isFetching={isFetching}
               subRowHeaders={subRowHeaders}
           />
         ) : (

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -40,9 +40,13 @@ export const TableHeader = ({
     showActionsBar,
     selectableRows,
     responsive,
-    headerRef
+    headerRef,
+    virtualizedRows,
+    enableVirtualization,
   } = useContext(AdvancedTableContext)
 
+  const isVirtualized = virtualizedRows || enableVirtualization;
+
   const classes = classnames(
     buildCss("pb_advanced_table_header"),
     globalProps(props),
@@ -57,46 +61,93 @@ export const TableHeader = ({
     `${isChrome() ? "chrome-styles" : ""}`,
     `${responsive === "scroll" && "pinned-left"}`,
   );
+
+  const renderRegularTableHeader = () => (
+    <thead className={classes} 
+        id={id}
+    >
+      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, index: number) => (
+        <tr 
+            key={`${headerGroup.id}-headerGroup`}
+            ref={index === 0 ? headerRef : null}
+        >
+          {!hasAnySubRows && selectableRows && (
+            <th className={customCellClassnames}>
+              <Checkbox
+                  checked={table?.getIsAllRowsSelected()}
+                  indeterminate={table?.getIsSomeRowsSelected()}
+                  onChange={table?.getToggleAllRowsSelectedHandler()}
+              />
+            </th>
+          )}
+          {headerGroup.headers.map(header => {
+            const isPinnedLeft = columnPinning.left.includes(header.id)
+            return (
+              <TableHeaderCell
+                  enableSorting={enableSorting}
+                  enableToggleExpansion={enableToggleExpansion}
+                  handleExpandOrCollapse={handleExpandOrCollapse}
+                  header={header}
+                  headerChildren={children}
+                  isPinnedLeft={isPinnedLeft}
+                  key={`${header.id}-header`}
+                  loading={loading}
+                  sortIcon={sortIcon}
+                  table={table}
+              />
+            )
+          })}
+        </tr>
+      ))}
+    </thead>
+  );
+
+  const renderVirtualizedTableHeader = () => (
+    <thead 
+        className={classes} 
+        data-virtualized="true"
+        id={id}
+    >
+      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, index: number) => (
+        <tr 
+            className="virtualized-header-row-header"
+            key={`${headerGroup.id}-headerGroup-virtualized`}
+            ref={index === 0 ? headerRef : null}
+        >
+          {!hasAnySubRows && selectableRows && (
+            <th className={classnames(customCellClassnames, "virtualized-header-cell")}>
+              <Checkbox
+                  checked={table?.getIsAllRowsSelected()}
+                  indeterminate={table?.getIsSomeRowsSelected()}
+                  onChange={table?.getToggleAllRowsSelectedHandler()}
+              />
+            </th>
+          )}
+          {headerGroup.headers.map(header => {
+            const isPinnedLeft = columnPinning.left.includes(header.id)
+            return (
+              <TableHeaderCell
+                  enableSorting={enableSorting}
+                  enableToggleExpansion={enableToggleExpansion}
+                  handleExpandOrCollapse={handleExpandOrCollapse}
+                  header={header}
+                  headerChildren={children}
+                  isPinnedLeft={isPinnedLeft}
+                  isVirtualized
+                  key={`${header.id}-header-virtualized`}
+                  loading={loading}
+                  sortIcon={sortIcon}
+                  table={table}
+              />
+            )
+          })}
+        </tr>
+      ))}
+    </thead>
+  );
   return (
-    <>
-      <thead className={classes}
-          id={id}
-      >
-        {/* Get the header groups (only one in this example) */}
-        {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, index: number) => (
-          <tr 
-              key={`${headerGroup.id}-headerGroup`}
-              ref={index === 0 ? headerRef : null}
-          >
-            {!hasAnySubRows && selectableRows && (
-              <th className={customCellClassnames}>
-                <Checkbox
-                    checked={table?.getIsAllRowsSelected()}
-                    indeterminate={table?.getIsSomeRowsSelected()}
-                    onChange={table?.getToggleAllRowsSelectedHandler()}
-                />
-              </th>
-            )}
-            {headerGroup.headers.map(header => {
-              const isPinnedLeft = columnPinning.left.includes(header.id)
-              return (
-                <TableHeaderCell
-                    enableSorting={enableSorting}
-                    enableToggleExpansion={enableToggleExpansion}
-                    handleExpandOrCollapse={handleExpandOrCollapse}
-                    header={header}
-                    headerChildren={children}
-                    isPinnedLeft={isPinnedLeft}
-                    key={`${header.id}-header`}
-                    loading={loading}
-                    sortIcon={sortIcon}
-                    table={table}
-                />
-              )
-            })}
-          </tr>
-        ))}
-      </thead>
+    <>      
+      {isVirtualized ? renderVirtualizedTableHeader() : renderRegularTableHeader()}
     </>
   )
 }