playbook_ui 14.20.0.pre.rc.2 → 14.21.0.pre.alpha.PLAY2167advtablenitrorowborderdoubling8097

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 550eb9cf8486549b50d70381987dc8b6df78f8aa7dea1524b5e2b9d7142966e6
-  data.tar.gz: 8ad49a6bd0a8b792998a24292872458ff0af0b0fd65c98c93aec4b37b40ffa3d
+  metadata.gz: 5ef1dadd772247511a5e184662f4910a42947f96f61871a13877fa3c51fba3de
+  data.tar.gz: 45efcf4115cdbc321aeb5fa8ba8e15d4bc89858ca1d69b63164b6af195a1c064
 SHA512:
-  metadata.gz: 3c12a7c65488cb05d4652474347af12ccaf4ae4cdf3e5631cdd38d55d449533807f44ced11e23b163ba2f194f4b016216c189730f6c92050e889497a54b6a443
-  data.tar.gz: 7a92df587607e3ba5944e69d790a6433bde32b15d3c1626004e2e34d0eeb3489a14d468dc6322d73391bdf0acecf5581f137d371d387f1d0e2b49b9928758a6a
+  metadata.gz: 690411950078025323daaab9520753292cfc3b7b256eb63bd0dd349d51139805deef85e7acea45323ddaaaeb4bd75900008bc5546aeb7cd9be4c0d599b2d3315
+  data.tar.gz: d441af64fc1d9b5be0599aed95c1fe89fe521d49a386d8afde33e48d12eb7799230ebf428c19207d5831919ec510c47d01a623e2ebe7fdb8a7ed5acff15643eb

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

@@ -47,7 +47,7 @@ export const CustomCell = ({
       <Flex 
           alignItems="center" 
           columnGap="xs"
-          justify={!hasAnySubRows && !inlineRowLoading ? "end" : "start"}
+          justify={"start"}
           orientation="row"
       >
         {

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

@@ -19,6 +19,71 @@ type RegularTableViewProps = {
   subRowHeaders?: string[]
 }
 
+// Helper function for Table Rendering
+const TableCellRenderer = ({
+  row,
+  collapsibleTrail = true,
+  loading = false,
+  stickyLeftColumn,
+  columnPinning
+}: {
+  row: Row<GenericObject>
+  collapsibleTrail?: boolean
+  loading?: boolean | string
+  stickyLeftColumn?: string[]
+  columnPinning: { left: string[] }
+}) => {
+  return (
+    <>
+      {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
+        const isPinnedLeft = columnPinning.left.includes(cell.column.id);
+        const isLastCell = (() => {
+          const parent = cell.column.parent;
+          if (!parent) {
+            const last = row.getVisibleCells().at(-1);
+            return last?.column.id === cell.column.id;
+          }
+
+          const visibleSiblings = parent.columns.filter(col => col.getIsVisible());
+          return visibleSiblings.at(-1)?.id === cell.column.id;
+        })();
+
+        const { column } = cell;
+        
+        return (
+          <td
+              align="right"
+              className={classnames(
+                `${cell.id}-cell position_relative`,
+                isChrome() ? "chrome-styles" : "",
+                isPinnedLeft && 'pinned-left',
+                stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft && 'sticky-left',
+                isLastCell && 'last-cell',
+              )}
+              key={`${cell.id}-data`}
+              style={{
+                left: isPinnedLeft
+                  ? i === 1 // Accounting for set min-width for first column
+                    ? '180px'
+                    : `${column.getStart("left")}px`
+                  : undefined,
+            }}
+          >
+            {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
+            <span id={`${cell.id}-span`}>
+              {loading ? (
+                <LoadingCell />
+              ) : (
+                flexRender(cell.column.columnDef.cell, cell.getContext())
+              )}
+            </span>
+          </td>
+        );
+      })}
+    </>
+  )
+}
+
 export const RegularTableView = ({
   collapsibleTrail = true,
   subRowHeaders,
@@ -28,11 +93,14 @@ export const RegularTableView = ({
     handleExpandOrCollapse,
     inlineRowLoading,
     loading,
-    responsive,
     table,
     selectableRows,
     hasAnySubRows,
-    stickyLeftColumn
+    stickyLeftColumn,
+    pinnedRows,
+    headerHeight,
+    rowHeight,
+    sampleRowRef,
   } = useContext(AdvancedTableContext)
 
 
@@ -50,9 +118,44 @@ export const RegularTableView = ({
   const columnPinning = table.getState().columnPinning || { left: [] };
   const columnDefinitions = table.options.meta?.columnDefinitions || [];
 
+  // Row pinning
+  function PinnedRow({ row }: { row: Row<any> }) {
+    return (
+      <tr
+          className={classnames(
+            `pinned-row`,
+          )}
+          style={{
+            backgroundColor: 'white',
+            position: 'sticky',
+            top:   
+              row.getIsPinned() === 'top'
+                  ? `${row.getPinnedIndex() * rowHeight + headerHeight}px`
+                  : undefined,
+            zIndex: '3'
+          }}
+      >
+        <TableCellRenderer
+            collapsibleTrail={collapsibleTrail}
+            columnPinning={columnPinning}
+            loading={loading}
+            row={row}
+            stickyLeftColumn={stickyLeftColumn}
+        />
+      </tr>
+    )
+  }
+
+  const totalRows = pinnedRows ? table.getCenterRows() : table.getRowModel().rows
+
   return (
     <>
-      {table.getRowModel().rows.map((row: Row<GenericObject>) => {
+      {pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
+        <PinnedRow key={row.id} 
+            row={row} 
+        />
+      ))}
+      {totalRows.map((row: Row<GenericObject>, rowIndex: number) => {
         const isExpandable = row.getIsExpanded();
         const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
         const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
@@ -60,6 +163,7 @@ export const RegularTableView = ({
         const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0]?.cellAccessors?.length);
         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();
 
         return (
           <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
@@ -77,6 +181,7 @@ export const RegularTableView = ({
             <tr
                 className={`${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
                 id={`${row.index}-${row.id}-${row.depth}-row`}
+                ref={isFirstRegularRow ? sampleRowRef : null}
             >
               {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
               {selectableRows && !hasAnySubRows && (
@@ -90,51 +195,13 @@ export const RegularTableView = ({
                   />
                 </td>
               )}
-
-              {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
-                const isPinnedLeft = columnPinning.left.includes(cell.column.id);
-                const isLastCell = (() => {
-                  const parent = cell.column.parent;
-                    if (!parent) {
-                      const last = row.getVisibleCells().at(-1);
-                      return last?.column.id === cell.column.id;
-                    }
-                  
-                    const visibleSiblings = parent.columns.filter(col => col.getIsVisible());
-                    return visibleSiblings.at(-1)?.id === cell.column.id;
-                   })();
-
-                const { column } = cell;
-                return (
-                  <td
-                      align="right"
-                      className={classnames(
-                        `${cell.id}-cell position_relative`,
-                        isChrome() ? "chrome-styles" : "",
-                        isPinnedLeft && 'pinned-left',
-                        stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft && 'sticky-left',
-                        isLastCell && 'last-cell',
-                      )}
-                      key={`${cell.id}-data`}
-                      style={{
-                        left: isPinnedLeft
-                          ? i === 1 //Accounting for set min-width for first column
-                            ? '180px'
-                            : `${column.getStart("left")}px`
-                          : undefined,
-                      }}
-                  >
-                    {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
-                    <span id={`${cell.id}-span`}>
-                      {loading ? (
-                        <LoadingCell />
-                      ) : (
-                        flexRender(cell.column.columnDef.cell, cell.getContext())
-                      )}
-                    </span>
-                  </td>
-                );
-              })}
+              <TableCellRenderer
+                  collapsibleTrail={collapsibleTrail}
+                  columnPinning={columnPinning}
+                  loading={loading}
+                  row={row}
+                  stickyLeftColumn={stickyLeftColumn}
+              />
             </tr>
 
             {/* Display LoadingInline if Row Data is querying and there are no children already */}
@@ -154,4 +221,4 @@ export const RegularTableView = ({
   );
 }
 
-export default RegularTableView;
+export default RegularTableView;

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useContext } from "react";
+import React, { useEffect, useRef, useContext, useState } from "react";
 
 import AdvancedTableContext from "../Context/AdvancedTableContext";
 import { buildVisibilityTree } from "../Utilities/VisibilityTree";
@@ -7,13 +7,11 @@ import Card from "../../pb_card/_card";
 import Caption from "../../pb_caption/_caption";
 import Flex from "../../pb_flex/_flex";
 import FlexItem from "../../pb_flex/_flex_item";
-import Dropdown from "../../pb_dropdown/_dropdown";
-import DropdownContainer from "../../pb_dropdown/subcomponents/DropdownContainer";
-import DropdownTrigger from "../../pb_dropdown/subcomponents/DropdownTrigger";
 import Icon from "../../pb_icon/_icon";
 import Checkbox from "../../pb_checkbox/_checkbox";
 import SectionSeparator from "../../pb_section_separator/_section_separator";
 import Tooltip from "../../pb_tooltip/_tooltip";
+import PbReactPopover from "../../pb_popover/_popover";
 
 import {
   showActionBar,
@@ -56,11 +54,24 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
     const col   = table.getColumn(id);
     const show  = col.getIsVisible();
 
+    const handleVisibilityChange = () => {
+      col.toggleVisibility();
+      if (columnVisibilityControl?.onColumnVisibilityChange) {
+        const updatedVisibilityState = {
+          ...table.getAllColumns().reduce((acc: { [x: string]: any; }, col: { id: string | number; getIsVisible: () => any; }) => {
+            acc[col.id] = col.getIsVisible();
+            return acc;
+          }, {}),
+        };
+        columnVisibilityControl?.onColumnVisibilityChange(updatedVisibilityState);
+      }
+    };
+
     return (
       <Checkbox
           checked={show}
           key={id}
-          onChange={() => col.toggleVisibility()}
+          onChange={handleVisibilityChange}
           paddingBottom="xs"
           text={label}
       />
@@ -80,16 +91,24 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
     const allOn    = visibleArray.every(Boolean);
     const someOn   = visibleArray.some(Boolean);
 
+       const handleGroupVisibilityChange = () => {
+      leaves.forEach((id) => table.getColumn(id).toggleVisibility(!allOn));
+      if (columnVisibilityControl?.onColumnVisibilityChange) {
+        const updatedVisibilityState = {
+          ...table.getAllColumns().reduce((acc: { [x: string]: any; }, col: { id: string | number; getIsVisible: () => any; }) => {
+            acc[col.id] = col.getIsVisible();
+            return acc;
+          }, {}),
+        };
+        columnVisibilityControl?.onColumnVisibilityChange(updatedVisibilityState);
+      }
+    };
     return (
       <>
         <Checkbox
             checked={allOn}
             indeterminate={!allOn && someOn}
-            onChange={() =>
-              leaves.forEach((id) =>
-                table.getColumn(id).toggleVisibility(!allOn),
-              )
-            }
+            onChange={handleGroupVisibilityChange}
             paddingBottom="xs"
             text={node.label}
         />
@@ -113,7 +132,28 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
         hideActionBar(cardRef.current);
       }
     }
-  }, [isVisible]);
+  }, [isVisible, type]);
+
+  const [showPopover, setShowPopover] = useState(false)
+
+  const togglePopover = () => setShowPopover((prev) => !prev)
+  const handleShouldClose = (shouldClose: boolean) =>
+    setShowPopover(!shouldClose)
+
+  const popoverReference = (
+    <Tooltip 
+        placement="top" 
+        text="Column Configuration"
+    >
+      <div onClick={togglePopover}>
+      <Icon
+          color="primary"
+          cursor="pointer"
+          icon="sliders-h"
+      />
+      </div>
+    </Tooltip>
+  )
 
   return (
     <Card
@@ -139,30 +179,17 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
             <FlexItem>{actions}</FlexItem>
           </>
         ) : (
-          <Dropdown
-              className="column-visibility-dropdown-wrapper"
-              options={columnDefinitions}
+          <PbReactPopover
+              closeOnClick="outside"
+              placement="bottom-end"
+              reference={popoverReference}
+              shouldClosePopover={handleShouldClose}
+              show={showPopover}
+              zIndex={3}
           >
-            <DropdownTrigger>
-            <Tooltip 
-                placement='top' 
-                text="Column Configuration" 
-                zIndex={10}
-            >
-                <Icon 
-                    color="primary" 
-                    cursor="pointer" 
-                    icon="sliders-h" 
-                />
-            </Tooltip>
-            </DropdownTrigger>
-            <DropdownContainer
-                className="column-visibility-dropdown"
-                paddingTop="sm"
-            >
-              <>
+            <>
               <Caption 
-                  paddingBottom="sm" 
+                  paddingY="sm" 
                   text="Columns Config"
                   textAlign="center" 
               />
@@ -177,8 +204,7 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
                 </Flex>
               ))}
               </>
-            </DropdownContainer>
-          </Dropdown>
+          </PbReactPopover>
         )}
       </Flex>
     </Card>

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

@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import React, { useContext, useState } from "react"
 import classnames from "classnames"
 import { flexRender, Header, Table, RowModel } from "@tanstack/react-table"
 
@@ -8,10 +8,8 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 import Flex from "../../pb_flex/_flex"
 import Checkbox from "../../pb_checkbox/_checkbox"
-import Dropdown from "../../pb_dropdown/_dropdown"
-import DropdownTrigger from "../../pb_dropdown/subcomponents/DropdownTrigger"
-import DropdownOption from "../../pb_dropdown/subcomponents/DropdownOption"
-import DropdownContainer from "../../pb_dropdown/subcomponents/DropdownContainer"
+import SectionSeparator from "../../pb_section_separator/_section_separator"
+import PbReactPopover from "../../pb_popover/_popover";
 import Icon from "../../pb_icon/_icon"
 
 import { SortIconButton } from "./SortIconButton"
@@ -130,12 +128,26 @@ const isToggleExpansionEnabled =
 
   let justifyHeader:justifyTypes;
 
-  if (header?.index === 0 && hasAnySubRows || (header?.index === 0 && inlineRowLoading)) {
+  if (header?.index === 0 && hasAnySubRows || (header?.index === 0 && inlineRowLoading) || (header?.index === 0 && isToggleExpansionEnabled)) {
     justifyHeader = enableSorting ? "between" : "start";
   } else {
     justifyHeader = isLeafColumn ? "end" : "center";
   }
   
+  const [showPopover, setShowPopover] = useState(false)
+
+  const togglePopover = () => setShowPopover((prev) => !prev)
+  const handleShouldClose = (shouldClose: boolean) =>
+    setShowPopover(!shouldClose)
+
+  const popoverReference = (
+      <div className="gray-icon toggle-all-icon" 
+          onClick={togglePopover}
+      >
+          <Icon icon={displayIcon(toggleExpansionIcon)[0]} />
+      </div>
+  )
+
   const handleExpandDepth = (depth: number) => {
     if (onExpandByDepthClick) {
       const flatRows = table?.getRowModel().flatRows
@@ -191,31 +203,33 @@ const isToggleExpansionEnabled =
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
           {isToggleExpansionEnabled && hasAnySubRows && expandByDepth && (
-              <Dropdown className="expand-by-depth-dropdown-wrapper" 
-                  options={expandByDepth}
-              >
-                <DropdownTrigger className="gray-icon toggle-all-icon">
-                  <Icon icon={displayIcon(toggleExpansionIcon)[0]} />
-                </DropdownTrigger>
-                <DropdownContainer className="expand-by-depth-dropdown">
-                  {expandByDepth.map((option:{ [key: string]: any }, index: number) => (
-                    <DropdownOption
-                        key={index}
-                        option={option}
-                        padding="none"
+
+                    <PbReactPopover
+                        closeOnClick="any"
+                        placement="bottom-start"
+                        reference={popoverReference}
+                        shouldClosePopover={handleShouldClose}
+                        show={showPopover}
+                        zIndex={3}
                     > 
+                    {expandByDepth.map((option:{ [key: string]: any }, index: number) => (
+                      <>
                       <Flex
                           alignItems="center"
+                          className="pb-advanced-table-popover-option"
+                          cursor="pointer"
                           htmlOptions={{onClick: () => {handleExpandDepth(option.depth)} }}
                           paddingX="sm"
                           paddingY="xs"
                           >
                             {option.label}
-                          </Flex>
-                    </DropdownOption>
-                  ))}
-                </DropdownContainer>
-              </Dropdown>
+                      </Flex>
+                      {index !== expandByDepth.length - 1 && <SectionSeparator/>}
+                      </>
+                        ))}
+                    </PbReactPopover>
+                 
+
             )}
 
           {isToggleExpansionEnabledLoading &&(

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

@@ -1,4 +1,4 @@
-import React, { createContext, useRef, useMemo, useEffect } from 'react';
+import React, { createContext, useRef, useMemo, useEffect, useState, useCallback } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
 import { Row } from "@tanstack/react-table";
@@ -23,6 +23,54 @@ export const AdvancedTableProvider = ({ children, ...props }: {
 
   const table = props.table;
   const isVirtualized = props.virtualizedRows || props.enableVirtualization;
+  
+  // Pinned Row: height calculations for Header and Row
+  const headerRef = useRef(null);
+  const sampleRowRef = useRef(null);
+  
+  const [headerHeight, setHeaderHeight] = useState(44);
+  const [rowHeight, setRowHeight] = useState(38);
+
+  const measureHeights = useCallback(() => {
+    if (headerRef.current) {
+      const headerRect = headerRef.current.getBoundingClientRect();
+      if (headerRect.height > 0) {
+        setHeaderHeight(headerRect.height);
+      }
+    }
+    if (sampleRowRef.current) {
+      const rowRect = sampleRowRef.current.getBoundingClientRect();
+      if (rowRect.height > 0) {
+        setRowHeight(rowRect.height);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      measureHeights();
+    });
+
+    if (headerRef.current) {
+      resizeObserver.observe(headerRef.current);
+    }
+
+    if (sampleRowRef.current) {
+      resizeObserver.observe(sampleRowRef.current);
+    }
+
+    const timeoutId = setTimeout(measureHeights, 100);
+
+    return () => {
+      resizeObserver.disconnect();
+      clearTimeout(timeoutId);
+    };
+  }, [measureHeights]);
+
+  useEffect(() => {
+    measureHeights();
+  }, [table?.getRowModel().rows.length, measureHeights]);
+
 
   // Create a flattened data array that includes ALL components for virtualization
   const flattenedItems = useMemo(() => {
@@ -132,7 +180,15 @@ export const AdvancedTableProvider = ({ children, ...props }: {
     virtualizer: isVirtualized ? virtualizer : null,
     flattenedItems,
     virtualizedRows: isVirtualized,
-    enableVirtualization: isVirtualized
+    enableVirtualization: isVirtualized,
+    rowPinning: props.rowPinning,
+    setRowPinning: props.setRowPinning,
+    keepPinnedRows: props.keepPinnedRows,
+    headerHeight,
+    rowHeight,
+    headerRef,
+    sampleRowRef,
+    measureHeights,
   };
 
   return (

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import { Row } from "@tanstack/react-table";
+import { Row, RowPinningState } from "@tanstack/react-table";
 import { GenericObject } from "../../types";
 import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers";
 

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

@@ -6,7 +6,8 @@ import {
   getPaginationRowModel,
   getSortedRowModel,
   RowSelectionState,
-  Row
+  Row,
+  RowPinningState
 } from "@tanstack/react-table";
 import { GenericObject } from "../../types";
 import { createColumnHelper } from "@tanstack/react-table";
@@ -23,11 +24,14 @@ interface UseTableStateProps {
   loading?: boolean | string;
   pagination?: boolean;
   paginationProps?: GenericObject;
+  pinnedRows?: {
+    value?: RowPinningState;
+    onChange?: (value: RowPinningState) => void;
+  };
   virtualizedRows?: boolean;
   tableOptions?: GenericObject;
   onRowSelectionChange?: (arg: RowSelectionState) => void;
   columnVisibilityControl?: GenericObject;
-
 }
 
 export function useTableState({
@@ -43,18 +47,24 @@ export function useTableState({
   paginationProps,
   virtualizedRows = false,
   tableOptions,
-  columnVisibilityControl
+  columnVisibilityControl,
+  pinnedRows,
 }: UseTableStateProps) {
   // Create a local state for expanded and setExpanded if expandedControl not used
   const [localExpanded, setLocalExpanded] = useState({});
   const [loadingStateRowCount, setLoadingStateRowCount] = useState(initialLoadingRowsCount);
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [localColumnVisibility, setLocalColumnVisibility] = useState({});
+  const [localRowPinning, setLocalRowPinning] = useState<RowPinningState>({
+    top: [],
+  });
   // Determine whether to use the prop or the local state
   const expanded = expandedControl ? expandedControl.value : localExpanded;
   const setExpanded = expandedControl ? expandedControl.onChange : setLocalExpanded;
   const columnVisibility = (columnVisibilityControl && columnVisibilityControl.value) ? columnVisibilityControl.value : localColumnVisibility;
   const setColumnVisibility = (columnVisibilityControl && columnVisibilityControl.onChange) ? columnVisibilityControl.onChange : setLocalColumnVisibility;
+  const rowPinning = pinnedRows && pinnedRows.value || localRowPinning;
+  const setRowPinning = (pinnedRows && pinnedRows.onChange) ? pinnedRows.onChange : setLocalRowPinning;
 
   // Virtualized data handling (chunked loading)
   const fetchSize = 20; // Number of rows per "page"
@@ -115,6 +125,7 @@ export function useTableState({
       ...(sortControl     && { sorting }),
       ...(selectableRows  && { rowSelection }),
       ...(columnVisibility && { columnVisibility }),
+      ...(pinnedRows && { rowPinning }),
     },
   }), [
     expanded,
@@ -123,6 +134,7 @@ export function useTableState({
     selectableRows,
     rowSelection,
     columnVisibility,
+    rowPinning,
   ]);
 
   // Pagination configuration
@@ -153,7 +165,7 @@ export function useTableState({
     enableSortingRemoval: false,
     sortDescFirst: true,
     onRowSelectionChange: setRowSelection,
-    getRowId: selectableRows ? row => row.id : undefined,
+    getRowId: (selectableRows || pinnedRows) ? row => row.id : undefined,
     onColumnVisibilityChange: setColumnVisibility,
     meta: {
       columnDefinitions

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

@@ -39,7 +39,8 @@ export const TableHeader = ({
     hasAnySubRows,
     showActionsBar,
     selectableRows,
-    responsive
+    responsive,
+    headerRef
   } = useContext(AdvancedTableContext)
 
   const classes = classnames(
@@ -62,8 +63,11 @@ export const TableHeader = ({
           id={id}
       >
         {/* Get the header groups (only one in this example) */}
-        {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
-          <tr key={`${headerGroup.id}-headerGroup`}>
+        {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, index: number) => (
+          <tr 
+              key={`${headerGroup.id}-headerGroup`}
+              ref={index === 0 ? headerRef : null}
+          >
             {!hasAnySubRows && selectableRows && (
               <th className={customCellClassnames}>
                 <Checkbox