playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3032dropdowndisabledinput17361

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b1bf2d157b05e934cbfa3297c60f74cabb576373b5cb3b4a2b61d48df0ed27a3
-  data.tar.gz: 91635a39004a1f4169780f5065c21207b407308d0509d88710e9ad55b5eefc3c
+  metadata.gz: 3c7de1ce3d86ce191ea5196d520df0aeb0919a9802462e6d1ac2c2f5f92eaa38
+  data.tar.gz: 36ebe37441e50aa17346ddc906a3492cfd076fd19bc9f474481e16e37df895ac
 SHA512:
-  metadata.gz: f9d9fe0b6fea54f0eb1a347d9dd1b7d6c4d7a930825e5818c781c406edd89d444675b5772e3cba27e4d4de5f60acdf6e536a7f98dd905d91669dc95d616db777
-  data.tar.gz: 37fa1f6e6c2610ecfd26f259be1e048053c37a562511007f05efb577cc3659ba9745518ff9214d63e92da275b45210228d86fe2f3e2500e5e91b1f5f9edc404c
+  metadata.gz: 8463caa5d2ee1372d2964109e908da03cbb433d81b6de5af078d24ba33a904c9642f9bdb9051be0e7e7e98c4f1732a768f01235112a7f6ab2e4e96a88726ae56
+  data.tar.gz: 9b1c86838e5edcf56d3714ccb7c03ae0dee950be56052f56a4e1eb695dc30db0ce59b52b544fbf6df5965ae487f16669084bb3fb7c6070063d48fe6ffdb96588

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

@@ -6,7 +6,7 @@ import { GenericObject } from "../../types"
 import { isChrome } from "../Utilities/BrowserCheck"
 import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
 import { playbookColumnLayoutStylesFromMeta } from "../Utilities/ColumnLayoutHelper"
-import { getRowColorClass, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
+import { getFontWeight, getRowColorClass, getRowStyle, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -81,6 +81,7 @@ const TableCellRenderer = ({
         
         const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
         const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
+        const fontWeight = getFontWeight(customRowStyle)
 
         return (
           <td
@@ -103,6 +104,7 @@ const TableCellRenderer = ({
                   : undefined,
                   backgroundColor: cellBackgroundColor || (i === 0 && customRowStyle?.backgroundColor),
                   color: cellFontColor || customRowStyle?.fontColor,
+                  fontWeight,
             }}
           >
             {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
@@ -136,6 +138,7 @@ export const RegularTableView = ({
     pinnedRows,
     headerHeight,
     rowHeight,
+    actionBarHeight,
     rowStyling = [],
     sampleRowRef,
   } = useContext(AdvancedTableContext)
@@ -160,7 +163,7 @@ export const RegularTableView = ({
 
   // Row pinning
   function PinnedRow({ row }: { row: Row<any> }) {
-    const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
+    const customRowStyle = getRowStyle(rowStyling, row);
     return (
       <tr
           className={classnames(
@@ -172,9 +175,10 @@ export const RegularTableView = ({
             position: 'sticky',
             top:
               row.getIsPinned() === 'top'
-                  ? `${row.getPinnedIndex() * rowHeight + headerHeight}px`
+                  ? `${row.getPinnedIndex() * rowHeight + headerHeight + actionBarHeight}px`
                   : undefined,
-            zIndex: '3'
+            zIndex: '3',
+            fontWeight: getFontWeight(customRowStyle),
           }}
       >
         <TableCellRenderer
@@ -204,7 +208,7 @@ export const RegularTableView = ({
         const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
         const numberOfColumns = table.getAllFlatColumns().length;
         const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
-        const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
+        const customRowStyle = getRowStyle(rowStyling, row);
 
         // Use functions from RowUtils for consistent cell coloring
         const rowColor = getRowColorClass(row, inlineRowLoading || false);
@@ -227,7 +231,11 @@ 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}}
+                style={{
+                  backgroundColor: customRowStyle?.backgroundColor,
+                  color: customRowStyle?.fontColor,
+                  fontWeight: getFontWeight(customRowStyle),
+                }}
             >
               {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
               {selectableRows && !hasAnySubRows && (

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

@@ -17,6 +17,7 @@ import {
   showActionBar,
   hideActionBar,
 } from "../Utilities/ActionBarAnimationHelper";
+import { scheduleStickyActionBarHeightUpdate } from "../Utilities/StickyLayoutHelper";
 import { GenericObject } from "../../types";
 
 interface TableActionBarProps {
@@ -39,7 +40,7 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
   type = "row-selection",
 }) => {
   const cardRef = useRef(null);
-  const { table, columnVisibilityControl, columnDefinitions } =
+  const { table, columnVisibilityControl, columnDefinitions, tableContainerRef } =
     useContext(AdvancedTableContext);
 
   // ----------- Column visibility logic -----------
@@ -131,8 +132,10 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
       } else {
         hideActionBar(cardRef.current);
       }
+
+      scheduleStickyActionBarHeightUpdate(tableContainerRef?.current ?? null);
     }
-  }, [isVisible, type]);
+  }, [isVisible, type, tableContainerRef]);
 
   const [showPopover, setShowPopover] = useState(false)
 

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

@@ -4,6 +4,7 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import { Row } from "@tanstack/react-table";
 import { GenericObject } from "../../types";
 import { getRowHeightEstimate } from '../Utilities/TableContainerStyles';
+import { measureElementHeight } from '../Utilities/StickyLayoutHelper';
 
 const AdvancedTableContext = createContext<any>({});
 
@@ -30,8 +31,11 @@ export const AdvancedTableProvider = ({ children, ...props }: {
   
   const [headerHeight, setHeaderHeight] = useState(44);
   const [rowHeight, setRowHeight] = useState(38);
+  const [actionBarHeight, setActionBarHeight] = useState(0);
 
   const measureHeights = useCallback(() => {
+    const wrapper = (props.tableContainerRef?.current || tableContainerRef.current) as HTMLElement | null;
+
     if (headerRef.current) {
       const headerElement = headerRef.current as HTMLElement;
       const headerRect = headerElement.getBoundingClientRect();
@@ -45,7 +49,21 @@ export const AdvancedTableProvider = ({ children, ...props }: {
         setRowHeight(rowRect.height);
       }
     }
-  }, []);
+
+    if (wrapper) {
+      const actionBar = wrapper.querySelector(
+        ".row-selection-actions-card.is-visible, .row-selection-actions-card.show-action-card"
+      ) as HTMLElement | null;
+      const measuredActionBarHeight = actionBar
+        ? measureElementHeight(actionBar)
+        : 0;
+      setActionBarHeight(measuredActionBarHeight);
+      wrapper.style.setProperty(
+        "--advanced-table-action-bar-height",
+        `${measuredActionBarHeight}px`
+      );
+    }
+  }, [props.tableContainerRef]);
 
   useEffect(() => {
     const resizeObserver = new ResizeObserver(() => {
@@ -56,6 +74,12 @@ export const AdvancedTableProvider = ({ children, ...props }: {
       resizeObserver.observe(headerRef.current);
     }
 
+    const wrapper = (props.tableContainerRef?.current || tableContainerRef.current) as HTMLElement | null;
+    const actionBar = wrapper?.querySelector(".row-selection-actions-card");
+    if (actionBar) {
+      resizeObserver.observe(actionBar);
+    }
+
     if (sampleRowRef.current) {
       resizeObserver.observe(sampleRowRef.current);
     }
@@ -72,7 +96,7 @@ export const AdvancedTableProvider = ({ children, ...props }: {
 
   useEffect(() => {
     measureHeights();
-  }, [table?.getRowModel().rows.length, headerGroupCount, measureHeights]);
+  }, [table?.getRowModel().rows.length, headerGroupCount, props.isActionBarVisible, measureHeights]);
 
 
   // Create a flattened data array that includes ALL components for virtualization
@@ -202,6 +226,7 @@ export const AdvancedTableProvider = ({ children, ...props }: {
     keepPinnedRows: props.keepPinnedRows,
     headerHeight,
     rowHeight,
+    actionBarHeight,
     headerRef,
     sampleRowRef,
     measureHeights,

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

@@ -39,7 +39,7 @@ interface UseTableStateProps {
   tableOptions?: GenericObject;
   onRowSelectionChange?: (arg: RowSelectionState) => void;
   columnVisibilityControl?: GenericObject;
-  rowStyling?: GenericObject;
+  rowStyling?: GenericObject[];
   inlineRowLoading?: boolean;
   sortParentOnly?: boolean;
 }
@@ -150,7 +150,7 @@ export function useTableState({
 
       return columnStructure;
     }) || [];
-  }, [columnHelper, onRowToggleClick, selectableRows]);
+  }, [columnHelper, onRowToggleClick, rowStyling, selectableRows]);
 
   const columns = useMemo(() => buildColumns(columnDefinitions), [buildColumns, columnDefinitions]);
 

data/app/pb_kits/playbook/pb_advanced_table/Utilities/CellRendererUtils.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Row, Getter } from "@tanstack/react-table";
 import { GenericObject } from "../../types";
 import { CustomCell } from "../Components/CustomCell";
+import { getRowStyle } from "./RowUtils";
 
 /**
  * Creates a cell render function for table columns
@@ -18,7 +19,7 @@ export const createCellFunction = (
   isFirstColumn?: boolean,
   onRowToggleClick?: (row: Row<GenericObject>) => void,
   selectableRows?: boolean,
-  rowStyling?: GenericObject
+  rowStyling?: GenericObject[]
 ) => {
   // Add display name to the returned function
   const cellRenderer = ({
@@ -29,7 +30,7 @@ export const createCellFunction = (
     getValue: Getter<string>
   }) => {
     const rowData = row.original;
-    const customStyle = rowStyling?.length > 0 && rowStyling?.find((s:GenericObject) => s?.rowId === row.id);
+    const customStyle = getRowStyle(rowStyling, row);
 
     if (isFirstColumn) {
       switch (row.depth) {
@@ -52,6 +53,7 @@ export const createCellFunction = (
           return accessorValue ? (
             <CustomCell
                 customRenderer={customRenderer}
+                customStyle={customStyle}
                 onRowToggleClick={onRowToggleClick}
                 row={row}
                 selectableRows={selectableRows}

data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts

@@ -36,6 +36,23 @@ export const shouldShowLoadingIndicator = (
     (row.depth < cellAccessorsLength);
 }
 
+export const getRowStyle = (
+  rowStyling: GenericObject[] | undefined,
+  row: Row<GenericObject>
+) => {
+  const rowId = row.original?.id ?? row.id
+  if (rowId == null) return
+
+  return rowStyling?.find((style: GenericObject) => (
+    String(style?.rowId) === String(rowId)
+  ))
+}
+
+export const getFontWeight = (rowStyle?: GenericObject) => {
+  if (rowStyle?.fontWeight === "bold") return 700
+  if (rowStyle?.fontWeight === "regular") return 400
+}
+
 /**
  * Creates a virtual item style object for virtualized rows
  */

data/app/pb_kits/playbook/pb_advanced_table/Utilities/StickyLayoutHelper.ts

@@ -0,0 +1,100 @@
+const VISIBLE_ACTION_BAR_SELECTOR =
+  ".row-selection-actions-card.is-visible, .row-selection-actions-card.show-action-card";
+
+const ACTION_BAR_HEIGHT_TRANSITION_MS = 350;
+
+export const measureElementHeight = (element: HTMLElement): number => {
+  const { height: rectHeight } = element.getBoundingClientRect();
+  const scrollHeight = element.scrollHeight;
+  const offsetHeight = element.offsetHeight;
+
+  return Math.ceil(Math.max(rectHeight, scrollHeight, offsetHeight));
+};
+
+export const updateStickyActionBarHeight = (
+  advancedTableWrapper: HTMLElement | null
+): number => {
+  if (!advancedTableWrapper) return 0;
+
+  const actionBar = advancedTableWrapper.querySelector(
+    VISIBLE_ACTION_BAR_SELECTOR
+  ) as HTMLElement | null;
+
+  if (!actionBar) {
+    advancedTableWrapper.style.setProperty(
+      "--advanced-table-action-bar-height",
+      "0px"
+    );
+    return 0;
+  }
+
+  const actionBarHeight = measureElementHeight(actionBar);
+
+  advancedTableWrapper.style.setProperty(
+    "--advanced-table-action-bar-height",
+    `${actionBarHeight}px`
+  );
+
+  return actionBarHeight;
+};
+
+export const scheduleStickyActionBarHeightUpdate = (
+  advancedTableWrapper: HTMLElement | null
+): void => {
+  if (!advancedTableWrapper) return;
+
+  updateStickyActionBarHeight(advancedTableWrapper);
+
+  requestAnimationFrame(() => {
+    updateStickyActionBarHeight(advancedTableWrapper);
+    requestAnimationFrame(() => {
+      updateStickyActionBarHeight(advancedTableWrapper);
+    });
+  });
+
+  window.setTimeout(() => {
+    updateStickyActionBarHeight(advancedTableWrapper);
+  }, ACTION_BAR_HEIGHT_TRANSITION_MS);
+};
+
+export const updateStickyHeaderRowHeights = (
+  advancedTableWrapper: HTMLElement | null
+): void => {
+  if (!advancedTableWrapper) return;
+
+  const table = advancedTableWrapper.querySelector("table.pb_table");
+  const thead = table?.querySelector("thead");
+  if (!thead) return;
+
+  const rows = Array.from(thead.querySelectorAll("tr"));
+  let totalHeight = 0;
+
+  rows.forEach((tr, index) => {
+    const height = tr.offsetHeight;
+    if (index === 0) {
+      advancedTableWrapper.style.setProperty(
+        "--advanced-table-header-row-0-height",
+        `${height}px`
+      );
+    } else if (index === 1) {
+      advancedTableWrapper.style.setProperty(
+        "--advanced-table-header-row-1-height",
+        `${height}px`
+      );
+    }
+    totalHeight += height;
+  });
+
+  advancedTableWrapper.style.setProperty(
+    "--advanced-table-header-height",
+    `${totalHeight}px`
+  );
+
+  updateStickyActionBarHeight(advancedTableWrapper);
+};
+
+export const updateStickyLayoutHeights = (
+  advancedTableWrapper: HTMLElement | null
+): void => {
+  updateStickyHeaderRowHeights(advancedTableWrapper);
+};

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -364,6 +364,34 @@
     }
   }
 
+  &.advanced-table-sticky-header {
+    .row-selection-actions-card.show-action-card,
+    .row-selection-actions-card.is-visible {
+      background-color: $white;
+      left: 0;
+      position: sticky;
+      top: 0;
+      z-index: 5;
+    }
+
+    .pb_table.sticky-header {
+      thead,
+      .pb_advanced_table_header {
+        top: var(--advanced-table-action-bar-height, 0px);
+        z-index: 3;
+      }
+    }
+
+    &.hidden-action-bar {
+      .pb_table.sticky-header {
+        thead,
+        .pb_advanced_table_header {
+          top: 0;
+        }
+      }
+    }
+  }
+
   // Max height overflow - the below prevents expansion from overflowing container at full screen for responsive and nonresponsive tables
   &.advanced-table-max-height-xs {
     max-height: 320px;
@@ -401,55 +429,6 @@
     @include scrollbar-styling;
   }
 
-  // Fullscreen
-  &.advanced-table-allow-fullscreen {
-    transition: all 0.3s ease;
-  }
-
-  &.advanced-table-fullscreen {
-    background-color: $bg_light;
-    box-sizing: border-box;
-    height: 100vh;
-    left: 0;
-    overflow: auto;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: $z_10;
-
-    .pb_table {
-      th,
-      td,
-      div,
-      button {
-        font-size: calc(100%);
-      }
-      box-sizing: border-box;
-      margin: $space_lg;
-      max-width: calc(100% - 64px);
-      width: calc(100% - 64px);
-    }
-
-    .pb_table.sticky-header {
-      thead,
-      .pb_advanced_table_header {
-        position: sticky !important;
-        top: 44px !important;
-        z-index: $z_10;
-      }
-    }
-  }
-
-  .advanced-table-fullscreen-header {
-    background-color: $white;
-    height: 44px;
-    padding: 13px 20px;
-    position: sticky;
-    top: 0;
-    width: 100%;
-    z-index: $z_10;
-  }
-
   // Icons
   .button-icon {
     display: flex;
@@ -507,16 +486,6 @@
     }
   }
 
-  .fullscreen-icon {
-    @extend .button-icon;
-    @extend %primary-color-pseudo;
-    padding: 2px 0;
-
-    &:focus-visible {
-      border-radius: $border_rad_lighter;
-    }
-  }
-
   // First column separator/border
   .table-header-cells:first-child,
   .table-header-cells-custom:first-child,
@@ -987,6 +956,13 @@
       background-color: $bg_dark_card;
     }
 
+    &.advanced-table-sticky-header {
+      .row-selection-actions-card.show-action-card,
+      .row-selection-actions-card.is-visible {
+        background-color: $bg_dark_card;
+      }
+    }
+
     .loading-toggle-icon,
     .loading-cell {
       &::after {
@@ -1002,18 +978,6 @@
       }
     }
 
-    // Fullscreen
-    &.advanced-table-fullscreen {
-      background: $bg_dark;
-    }
-
-    .advanced-table-fullscreen-header {
-      background-color: $bg_dark_card;
-      position: sticky;
-      top: 0;
-      z-index: $z_10;
-    }
-
     &[class*="advanced-table-sticky-left-columns"] {
       .sticky-left {
         background-color: $bg_dark;

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState, useCallback } from "react";
+import React, { useRef, useEffect } from "react";
 import classnames from "classnames";
 
 import { GenericObject } from "../types";
@@ -18,15 +18,7 @@ import TableActionBar from "./Components/TableActionBar";
 
 import { useTableState } from "./Hooks/useTableState";
 import { useTableActions } from "./Hooks/useTableActions";
-
-import Card from "../pb_card/_card"
-import Flex from "../pb_flex/_flex"
-import Icon from "../pb_icon/_icon"
-
-type FullscreenControls = {
-  toggleFullscreen: () => void;
-  isFullscreen: boolean;
-};
+import { updateStickyLayoutHeights, scheduleStickyActionBarHeightUpdate } from "./Utilities/StickyLayoutHelper";
 
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
@@ -74,8 +66,6 @@ type AdvancedTableProps = {
   onRowSelectionChange?: (arg: RowSelectionState) => void
   onCustomSortClick?: (arg: GenericObject[]) => void
   virtualizedRows?: boolean
-  allowFullScreen?: boolean
-  fullScreenControl?: (controls: FullscreenControls) => void
 } & GlobalProps;
 
 /**
@@ -135,8 +125,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     toggleExpansionIcon = "arrows-from-line",
     onRowSelectionChange,
     virtualizedRows = false,
-    allowFullScreen = false,
-    fullScreenControl,
   } = props;
 
   const noTableCardContainer = tableProps?.container === false;
@@ -214,87 +202,51 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     );
   }, [fetchMoreOnBottomReached, fetchNextPage, isFetching, totalFetched, fullData.length]);
 
-  // Fullscreen
-  const [isFullscreen, setIsFullscreen] = useState(false)
+  // Build CSS classes and props
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
 
-  const toggleFullscreen = useCallback(() => {
-    setIsFullscreen(prevState => !prevState)
-  }, [])
+  // Visibility flag for action bar
+  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
+  const isStickyHeader = Boolean(tableProps?.sticky);
 
   useEffect(() => {
-    if (allowFullScreen && fullScreenControl) {
-      fullScreenControl({
-        toggleFullscreen,
-        isFullscreen
-      })
-    }
-  }, [allowFullScreen, fullScreenControl, toggleFullscreen, isFullscreen])
+    if (!isStickyHeader || !tableWrapperRef.current) return;
 
-  const renderFullscreenHeader = () => {
-    if (!isFullscreen) return null
+    const wrapper = tableWrapperRef.current;
+    const updateHeights = () => updateStickyLayoutHeights(wrapper);
 
-    const defaultMinimizeIcon = (
-      <button
-          className="gray-icon fullscreen-icon"
-          onClick={toggleFullscreen}
-      >
-        <Icon
-            cursor="pointer"
-            fixedWidth
-            icon="arrow-down-left-and-arrow-up-right-to-center"
-            {...props}
-        />
-      </button>
-    )
-
-    return (
-      <Card
-          borderNone
-          borderRadius="none"
-          className="advanced-table-fullscreen-header"
-          {...props}
-      >
-          <Flex justify="end">
-            {defaultMinimizeIcon}
-          </Flex>
-      </Card>
-    )
-  }
+    updateHeights();
+    scheduleStickyActionBarHeightUpdate(wrapper);
 
-  useEffect(() => {
-    if (!allowFullScreen) return
+    const resizeObserver = new ResizeObserver(updateHeights);
+    resizeObserver.observe(wrapper);
 
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && isFullscreen) {
-        event.preventDefault()
-        toggleFullscreen()
-      }
+    const actionBar = wrapper.querySelector(".row-selection-actions-card");
+    if (actionBar) {
+      resizeObserver.observe(actionBar);
     }
-    document.addEventListener('keydown', handleKeyDown)
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-    }
-  }, [allowFullScreen, toggleFullscreen, isFullscreen])
 
-  // Build CSS classes and props
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
+    const table = wrapper.querySelector("table.pb_table");
+    const thead = table?.querySelector("thead");
+    if (thead) {
+      resizeObserver.observe(thead);
+    }
 
-  // Visibility flag for action bar
-  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
+    return () => resizeObserver.disconnect();
+  }, [isStickyHeader, isActionBarVisible, columnDefinitions, tableData]);
 
   const classes = classnames(
     buildCss("pb_advanced_table"),
     `advanced-table-responsive-${responsive}`,
     maxHeight ? `advanced-table-max-height-${maxHeight}` : '',
     {
-      'advanced-table-fullscreen': isFullscreen,
-      'advanced-table-allow-fullscreen': allowFullScreen,
       // Add the hidden-action-bar class when action bar functionality exists but is not visible
       'hidden-action-bar': (selectableRows || columnVisibilityControl) && !isActionBarVisible,
     },
     {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
+    { 'advanced-table-sticky-header': isStickyHeader },
     { 'advanced-table-no-table-container': noTableCardContainer },
     columnGroupBorderColor ? `column-group-border-${columnGroupBorderColor}` : '',
     scrollBarNone ? 'advanced-table-hide-scrollbar' : '',
@@ -358,7 +310,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
           ref={tableWrapperRef}
           style={tableWrapperStyle as React.CSSProperties}
       >
-        {renderFullscreenHeader()}
         <AdvancedTableProvider
             cascadeCollapse={cascadeCollapse}
             columnDefinitions={columnDefinitions}
@@ -375,7 +326,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             hasAnySubRows={hasAnySubRows}
             inlineRowLoading={inlineRowLoading}
             isActionBarVisible={isActionBarVisible}
-            isFullscreen={isFullscreen}
             loading={loading}
             onCustomSortClick={onCustomSortClick}
             onExpandByDepthClick={onExpandByDepthClick}