playbook_ui 16.4.0.pre.alpha.testingmetadata15488 → 16.4.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cc0b57d6f8358986f32d12c21883fec8044e2d68665ea18b7afb64d1d4e463b1
-  data.tar.gz: 54556178be28af1a7cea9e1e2d584e9e21cda6c2201cb7311c882dd88b10caf3
+  metadata.gz: 0f7d056170ce6b317f95c9d7ad73a63c8f7f3210c6cd02d17414534b2bff7c80
+  data.tar.gz: f2cb5edafbb6d1fb4ffacc6985d1422f5e3ce14930195b01dc9e08b8e41dd691
 SHA512:
-  metadata.gz: caf1ed836f3ea9ad0d7bd9bdd11696863d0093bb4460e401a946185d0deb8facc55a9dc6b870cb43c40f46d7e92d7c956aa5bd3ac7cf23221f6f28b53553eb9a
-  data.tar.gz: 8666d01061e0658f8676e02be7298a9b76f1c12971660be88aa18f05be202e764f39b9ee0ed9e62b65ff2f601fc72748fcb5635115afd7d2d738619329b8704b
+  metadata.gz: 802232b2891b04f6890eec0e1810274a5faab50b2bba3067ccb7bc393226e70239733f941db20c0deba832bddc8591aad4782c66367389c823a7347eb1399169
+  data.tar.gz: 60a018fbfc411d74df9c01f63d419a2950069cd9cf21b90a1655baa7dcbc6690f22a67755120640e6215af7f7665dea8709bd866e58e5e3d4075cfc53d401c23

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

@@ -33,8 +33,7 @@ export const AdvancedTableProvider = ({ children, ...props }: {
 
   const measureHeights = useCallback(() => {
     if (headerRef.current) {
-      const headerElement = headerRef.current as HTMLElement;
-      const headerRect = headerElement.getBoundingClientRect();
+      const headerRect = headerRef.current.getBoundingClientRect();
       if (headerRect.height > 0) {
         setHeaderHeight(headerRect.height);
       }
@@ -68,11 +67,9 @@ export const AdvancedTableProvider = ({ children, ...props }: {
     };
   }, [measureHeights]);
 
-  const headerGroupCount = table?.getHeaderGroups()?.length ?? 0;
-
   useEffect(() => {
     measureHeights();
-  }, [table?.getRowModel().rows.length, headerGroupCount, measureHeights]);
+  }, [table?.getRowModel().rows.length, measureHeights]);
 
 
   // Create a flattened data array that includes ALL components for virtualization

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

@@ -12,7 +12,6 @@ import {
 import { GenericObject } from "../../types";
 import { createColumnHelper } from "@tanstack/react-table";
 import { createCellFunction } from "../Utilities/CellRendererUtils";
-import { getParentOnlySortedRowModel } from "../Utilities/RowModelUtils";
 
 interface UseTableStateProps {
   tableData: GenericObject[];
@@ -37,7 +36,6 @@ interface UseTableStateProps {
   columnVisibilityControl?: GenericObject;
   rowStyling?: GenericObject;
   inlineRowLoading?: boolean;
-  sortParentOnly?: boolean;
 }
 
 export function useTableState({
@@ -57,8 +55,7 @@ export function useTableState({
   columnVisibilityControl,
   pinnedRows,
   rowStyling,
-  inlineRowLoading = false,
-  sortParentOnly = false
+  inlineRowLoading = false
 }: UseTableStateProps) {
 
   // Create a local state for expanded and setExpanded if expandedControl not used
@@ -193,7 +190,7 @@ export function useTableState({
     getSubRows: (row: GenericObject) => row.children,
     getCoreRowModel: getCoreRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
-    getSortedRowModel: sortParentOnly ? getParentOnlySortedRowModel() : getSortedRowModel(),
+    getSortedRowModel: getSortedRowModel(),
     enableSortingRemoval: enableSortingRemoval,
     sortDescFirst: true,
     onRowSelectionChange: setRowSelection,

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

@@ -64,12 +64,14 @@ export const TableHeader = ({
   );
 
   const renderRegularTableHeader = () => (
-    <thead className={classes}
+    <thead className={classes} 
         id={id}
-        ref={headerRef}
     >
-      {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
@@ -103,16 +105,16 @@ export const TableHeader = ({
   );
 
   const renderVirtualizedTableHeader = () => (
-    <thead
-        className={classes}
+    <thead 
+        className={classes} 
         data-virtualized="true"
         id={id}
-        ref={headerRef}
     >
-      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
-        <tr
+      {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")}>

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

@@ -63,51 +63,6 @@
     width: 100%;
   }
 
-  // Override pb_table endcap: first and last column use same padding as rest of row
-  // First column
-  .pb_table.table-sm tbody tr td:first-child,
-  .pb_table.table-sm tbody tr .pb_table_td:first-child,
-  .pb_table.table-sm tbody .pb_table_tr td:first-child,
-  .pb_table.table-sm tbody .pb_table_tr .pb_table_td:first-child,
-  .pb_table.table-sm .pb_table_tbody tr td:first-child,
-  .pb_table.table-sm .pb_table_tbody tr .pb_table_td:first-child,
-  .pb_table.table-sm .pb_table_tbody .pb_table_tr td:first-child,
-  .pb_table.table-sm .pb_table_tbody .pb_table_tr .pb_table_td:first-child {
-    padding-left: $space-xs;
-  }
-  .pb_table.table-md tbody tr td:first-child,
-  .pb_table.table-md tbody tr .pb_table_td:first-child,
-  .pb_table.table-md tbody .pb_table_tr td:first-child,
-  .pb_table.table-md tbody .pb_table_tr .pb_table_td:first-child,
-  .pb_table.table-md .pb_table_tbody tr td:first-child,
-  .pb_table.table-md .pb_table_tbody tr .pb_table_td:first-child,
-  .pb_table.table-md .pb_table_tbody .pb_table_tr td:first-child,
-  .pb_table.table-md .pb_table_tbody .pb_table_tr .pb_table_td:first-child {
-    padding-left: $space-sm;
-  }
-
-  // Last column
-  .pb_table.table-sm tbody tr td:last-child,
-  .pb_table.table-sm tbody tr .pb_table_td:last-child,
-  .pb_table.table-sm tbody .pb_table_tr td:last-child,
-  .pb_table.table-sm tbody .pb_table_tr .pb_table_td:last-child,
-  .pb_table.table-sm .pb_table_tbody tr td:last-child,
-  .pb_table.table-sm .pb_table_tbody tr .pb_table_td:last-child,
-  .pb_table.table-sm .pb_table_tbody .pb_table_tr td:last-child,
-  .pb_table.table-sm .pb_table_tbody .pb_table_tr .pb_table_td:last-child {
-    padding-right: $space-xs;
-  }
-  .pb_table.table-md tbody tr td:last-child,
-  .pb_table.table-md tbody tr .pb_table_td:last-child,
-  .pb_table.table-md tbody .pb_table_tr td:last-child,
-  .pb_table.table-md tbody .pb_table_tr .pb_table_td:last-child,
-  .pb_table.table-md .pb_table_tbody tr td:last-child,
-  .pb_table.table-md .pb_table_tbody tr .pb_table_td:last-child,
-  .pb_table.table-md .pb_table_tbody .pb_table_tr td:last-child,
-  .pb_table.table-md .pb_table_tbody .pb_table_tr .pb_table_td:last-child {
-    padding-right: $space-sm;
-  }
-
   // Virtualized Table and Rows for Infinite Scroll
   scrollbar-gutter: stable right-edges;
   .virtualized-header-row-header {
@@ -674,18 +629,12 @@
     @each $color_name, $color_value in $border_color_options {
       &.column-group-border-#{$color_name} {
         @if $theme == "light" {
-          &:not(.advanced-table-no-table-container) {
-            @include advanced-table-sticky-wrapper-frame($color_value);
-          }
           @include advanced-table-sticky-mixin(
             $color_value,
             $white,
             lighten($silver, $opacity_7)
           );
         } @else if $theme == "dark" {
-          &:not(.advanced-table-no-table-container) {
-            @include advanced-table-sticky-wrapper-frame($color_value);
-          }
           @include advanced-table-sticky-mixin(
             $color_value,
             $bg_dark_card,
@@ -721,10 +670,6 @@
       width: 100%;
       @include scrollbar-styling;
 
-      &:not(.advanced-table-no-table-container) {
-        @include advanced-table-sticky-wrapper-frame($border_light);
-      }
-
       // These are the responsive borders that should NOT inherit the custom color
       @include advanced-table-sticky-mixin(
         $border_light,
@@ -775,7 +720,7 @@
     }
   }
 
-  // Row Pinning - React uses inline style; Rails passes same style via html_options from table_body
+  // Row Pinning - additional inline styles in RegularTableView.tsx
   .pinned-row {
     box-shadow: 0 4px 10px 0 rgba($shadow, 0.16) !important;
   }
@@ -1018,11 +963,6 @@
       .sticky-left {
         background-color: $bg_dark;
       }
-
-      &:not(.advanced-table-no-table-container) {
-        @include advanced-table-sticky-wrapper-frame($border_dark);
-      }
-
       @include advanced-table-sticky-mixin(
         $border_dark,
         $bg_dark_card,
@@ -1041,10 +981,6 @@
           }
         }
 
-        &:not(.advanced-table-no-table-container) {
-          @include advanced-table-sticky-wrapper-frame($border_dark);
-        }
-
         // These are the responsive borders that should NOT inherit the custom color
         @include advanced-table-sticky-mixin(
           $border_dark,

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

@@ -66,7 +66,6 @@ type AdvancedTableProps = {
   showActionsBar?: boolean,
   persistToggleExpansionButton?: boolean,
   sortControl?: GenericObject
-  sortParentOnly?: boolean
   tableData: GenericObject[]
   tableOptions?: GenericObject
   tableProps?: GenericObject
@@ -115,7 +114,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     selectableRows,
     persistToggleExpansionButton = false,
     sortControl,
-    sortParentOnly = false,
     stickyLeftColumn,
     tableData,
     tableOptions,
@@ -127,8 +125,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     fullScreenControl,
   } = props;
 
-  const noTableCardContainer = tableProps?.container === false;
-
   // Component refs
   const tableWrapperRef = useRef<HTMLDivElement>(null);
 
@@ -163,8 +159,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     columnVisibilityControl,
     pinnedRows,
     rowStyling,
-    inlineRowLoading,
-    sortParentOnly
+    inlineRowLoading
   });
 
   // Initialize table actions
@@ -283,7 +278,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       'hidden-action-bar': (selectableRows || columnVisibilityControl) && !isActionBarVisible,
     },
     {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
-    { 'advanced-table-no-table-container': noTableCardContainer },
     columnGroupBorderColor ? `column-group-border-${columnGroupBorderColor}` : '',
     scrollBarNone ? 'advanced-table-hide-scrollbar' : '',
     globalProps(props),

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -7,12 +7,12 @@
     }) %>
   <% end %>
 
-  <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.merge(object.table_props || {})) do %>
+  <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.merge(object.table_props)) do %>
     <% if content.present? %>
       <% content.presence %>
     <% else %>
       <%= pb_rails("advanced_table/table_header", props: { table_id: object.id, column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar, inline_row_loading: object.inline_row_loading, persist_toggle_expansion_button: object.persist_toggle_expansion_button, table_data: object.table_data }) %>
-      <%= pb_rails("advanced_table/table_body", props: { table_id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling, inline_row_loading: object.inline_row_loading, pinned_rows: object.pinned_rows }) %>
+      <%= pb_rails("advanced_table/table_body", props: { table_id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling, inline_row_loading: object.inline_row_loading }) %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -37,8 +37,6 @@ module Playbook
                                 default: false
       prop :persist_toggle_expansion_button, type: Playbook::Props::Boolean,
                                              default: false
-      prop :pinned_rows, type: Playbook::Props::HashProp,
-                         default: {}
 
       def classname
         additional_classes = [
@@ -48,16 +46,9 @@ module Playbook
           hidden_action_bar_class,
         ]
         additional_classes << "column-group-border-#{column_group_border_color}" if column_group_border_color != "none"
-        additional_classes << "advanced-table-no-table-container" if no_table_card_container?
         generate_classname("pb_advanced_table", *additional_classes, separator: " ")
       end
 
-      def no_table_card_container?
-        return false unless table_props.is_a?(Hash)
-
-        table_props[:container] == false || table_props["container"] == false
-      end
-
       def responsive_classname
         responsive == "scroll" ? "advanced-table-responsive-scroll" : "advanced-table-responsive-none"
       end

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -495,41 +495,7 @@ test("sort button exists and sorts column data", () => {
 
   const row2 = kit.getElementsByTagName('tr')[2]
   expect(row2.id).toBe("0-0-0-row")
-})
-
-test("sortParentOnly sorts only parent rows and keeps children grouped under parent", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        sortParentOnly
-        tableData={MOCK_DATA}
-    >
-      <AdvancedTable.Header enableSorting />
-      <AdvancedTable.Body />
-    </AdvancedTable>
-  )
-
-  const kit = screen.getByTestId(testId)
-  const sortButton = kit.querySelector(".header-sort-button.pb_th_link")
-  expect(sortButton).toBeInTheDocument()
-
-  const tbody = kit.querySelector('tbody')
-  const rowsBefore = tbody.getElementsByTagName('tr')
-  expect(rowsBefore[0]).toHaveTextContent('2021')
-
-  sortButton.click()
-
-  const rowsAfter = tbody.getElementsByTagName('tr')
-  expect(rowsAfter[0]).toHaveTextContent('2022')
-
-  const expandButton = kit.querySelector(".gray-icon.expand-toggle-icon")
-  expandButton.click()
-
-  const rowsExpanded = tbody.getElementsByTagName('tr')
-  expect(rowsExpanded.length).toBeGreaterThan(1)
-  expect(rowsExpanded[1]).toHaveTextContent('Q1')
-})
+}) 
 
 test("Generates Table.Header default + custom classname", () => {
   render(

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -7,7 +7,6 @@ examples:
   - advanced_table_table_props: Table Props
   - advanced_table_sticky_header_rails: Sticky Header
   - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
-  - advanced_table_pinned_rows_rails: Pinned Rows
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
@@ -40,7 +39,6 @@ examples:
   - advanced_table_sort_per_column: Enable Sort By Column
   - advanced_table_sort_per_column_for_multi_column: Enable Sort By Column (Multi-Column)
   - advanced_table_custom_sort: Custom Sort
-  - advanced_table_sort_parent_only: Sort Parent Only
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers
@@ -75,7 +73,6 @@ examples:
   - advanced_table_column_visibility_with_state: Column Visibility Control With State
   - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
   - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
-  - advanced_table_grouped_headers_composition: Grouped headers, custom headers, sort, and pinned rows
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
   - advanced_table_row_styling: Row Styling
   - advanced_table_padding_control_per_row: Padding Control using Row Styling

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -42,7 +42,6 @@ export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinit
 export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'
 export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'
 export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced_table_with_custom_header_multi_header.jsx'
-export { default as AdvancedTableGroupedHeadersComposition } from './_advanced_table_grouped_headers_composition.jsx'
 export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
 export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'
 export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
@@ -50,5 +49,4 @@ export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_
 export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
 export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
 export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
-export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'
-export { default as AdvancedTableSortParentOnly } from './_advanced_table_sort_parent_only.jsx'
+export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -1,6 +1,5 @@
 import PbEnhancedElement from "../pb_enhanced_element";
 import { updateSelectionActionBar } from "./advanced_table_action_bar";
-import { setArrowVisibility, toggleVisibility } from "../utilities/domHelpers";
 
 const ADVANCED_TABLE_SELECTOR = "[data-advanced-table]";
 const DOWN_ARROW_SELECTOR = "#advanced-table_open_icon";
@@ -21,18 +20,10 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     this.childRowsMap = new Map();
   }
 
-  get table() {
-    return this.cachedTable || (this.cachedTable = this.element.closest("table"));
-  }
-
-  get mainTable() {
-    return this.cachedMainTable || (this.cachedMainTable = this.element.closest(".pb_advanced_table"));
-  }
-
   // Fetch and cache child rows for a given parent row ID
   childRowsFor(parentId) {
     if (!this.childRowsMap.has(parentId)) {
-      const table = this.table;
+      const table = this.element.closest("table");
       const rows = Array.from(
         table.querySelectorAll(`tr[data-row-parent="${parentId}"]`)
       );
@@ -42,8 +33,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   }
 
   updateTableSelectedRowsAttribute() {
-    const mainTable = this.mainTable;
-    if (!mainTable) return;
+    const mainTable = this.element.closest(".pb_advanced_table");
     mainTable.dataset.selectedRows = JSON.stringify(
       Array.from(PbAdvancedTable.selectedRows)
     );
@@ -51,8 +41,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
 
   // Recalculate selected count based on all checked checkboxes
   recalculateSelectedCount() {
-    const table = this.table;
-    if (!table) return;
+    const table = this.element.closest("table");
     
     // Get all checkboxes that could be part of the selection
     // This includes row checkboxes and any parent checkboxes that might be programmatically checked
@@ -106,7 +95,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     });
     
     this.updateTableSelectedRowsAttribute();
-    updateSelectionActionBar(this.mainTable, PbAdvancedTable.selectedRows.size);
+    updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
     
     // Sync header select-all state
     if (selectAllCheckbox) {
@@ -150,7 +139,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
 
     this.updateTableSelectedRowsAttribute();
 
-    const table = this.table;
+    const table = checkbox.closest("table");
     const selectAllCheckbox = table.querySelector("#select-all-rows");
 
     if (selectAllCheckbox) {
@@ -164,7 +153,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       );
       selectAllInput.checked = allChecked;
     }
-    updateSelectionActionBar(this.mainTable, PbAdvancedTable.selectedRows.size);
+    updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
   }
 
   get target() {
@@ -172,11 +161,10 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   }
 
   connect() {
-    const table = this.table;
-    if (!table) return;
+    const table = this.element.closest("table");
 
     this.hideCloseIcon();
-    const mainTable = this.mainTable;
+    const mainTable = this.element.closest(".pb_advanced_table");
     
     // This so it is hidden on first render
     if (mainTable) {
@@ -196,17 +184,6 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     if (table.dataset.pbAdvancedTableInitialized) return;
     table.dataset.pbAdvancedTableInitialized = "true";
 
-    // Measure header height so pinned rows don't overlap when header wraps (e.g. mobile)
-    if (mainTable) {
-      PbAdvancedTable.updateStickyHeaderRowHeights(mainTable);
-      const resizeObserver = new ResizeObserver(() => {
-        PbAdvancedTable.updateStickyHeaderRowHeights(mainTable);
-        PbAdvancedTable.updatePinnedRowsStickyTops(mainTable);
-      });
-      resizeObserver.observe(table);
-      mainTable._advancedTableHeaderResizeObserver = resizeObserver;
-    }
-
     // Delegate checkbox changes
     table.addEventListener("change", (event) => {
       const checkbox = event.target.closest('input[type="checkbox"]');
@@ -294,7 +271,9 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       }
 
       // Find direct child rows
-      const childRows = this.childRowsFor(toggleBtn.id);
+      const childRows = Array.from(
+        table.querySelectorAll(`[data-row-parent="${toggleBtn.id}"]`)
+      );
       this.toggleElement(childRows);
 
       // Restore original element context
@@ -305,8 +284,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   }
 
   addBorderRadiusOnLastVisibleRow() {
-    const parentElement = this.mainTable;
-    if (!parentElement) return;
+    const parentElement = this.element.closest(".pb_advanced_table");
 
     const table = document.getElementById(parentElement.id);
 
@@ -326,64 +304,9 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         lastVisibleRow.classList.add("last-visible-row");
         lastVisibleRow.classList.add("last-row-cell");
       }
-
-      PbAdvancedTable.updateStickyHeaderRowHeights(parentElement);
-      PbAdvancedTable.updatePinnedRowsStickyTops(table);
     }
   }
 
-  /**
-   * Measure thead height and set --advanced-table-header-height so pinned rows and
-   * multi-row sticky headers use the correct offset. Re-run when header wraps (e.g. mobile).
-   */
-  static updateStickyHeaderRowHeights(advancedTableWrapper) {
-    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 h = tr.offsetHeight;
-      if (index === 0) {
-        advancedTableWrapper.style.setProperty(
-          "--advanced-table-header-row-0-height",
-          `${h}px`
-        );
-      } else if (index === 1) {
-        advancedTableWrapper.style.setProperty(
-          "--advanced-table-header-row-1-height",
-          `${h}px`
-        );
-      }
-      totalHeight += h;
-    });
-    advancedTableWrapper.style.setProperty(
-      "--advanced-table-header-height",
-      `${totalHeight}px`
-    );
-  }
-
-  /**
-   * Recompute sticky top for visible pinned rows so collapsed rows don't leave a gap.
-   * Call after expand/collapse and on load.
-   */
-  static updatePinnedRowsStickyTops(advancedTableWrapper) {
-    const pinnedTbody = advancedTableWrapper?.querySelector("tbody.pinned-rows-tbody");
-    if (!pinnedTbody) return;
-
-    const pinnedRows = Array.from(pinnedTbody.querySelectorAll("tr.pinned-row"));
-    const visibleRows = pinnedRows.filter(
-      (tr) => tr.style.display !== "none" && tr.offsetParent !== null
-    );
-
-    const headerOffset = "var(--advanced-table-header-height, 44px)";
-    visibleRows.forEach((tr, index) => {
-      tr.style.top = `calc(${headerOffset} + 2.5em * ${index})`;
-    });
-  }
-
   hideCloseIcon() {
     const closeIcon = this.element.querySelector(UP_ARROW_SELECTOR);
     closeIcon.style.display = "none";
@@ -393,9 +316,11 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     elements.forEach((elem) => {
       elem.style.display = "table-row";
       elem.classList.add("is-visible");
-      const childRowsAll = this.table.querySelectorAll(
-        `[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`
-      );
+      const childRowsAll = this.element
+        .closest("table")
+        .querySelectorAll(
+          `[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`
+        );
 
       childRowsAll.forEach((childRow) => {
         const dataContent = childRow.dataset.advancedTableContent;
@@ -457,7 +382,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       const currentDepth = parseInt(elem.dataset.rowDepth);
       if (childrenArray.length > currentDepth) {
         // Find the child rows corresponding to this parent row
-        const childRows = this.table
+        const childRows = this.element
+          .closest("table")
           .querySelectorAll(
             `[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`
           );
@@ -475,39 +401,28 @@ export default class PbAdvancedTable extends PbEnhancedElement {
 
     const isVisible = elements[0].classList.contains("is-visible");
 
-    const isExpanded = toggleVisibility({
-      isVisible,
-      onHide: () => this.hideElement(elements),
-      onShow: () => this.showElement(elements),
-    });
-
-    isExpanded ? this.displayUpArrow() : this.displayDownArrow();
+    isVisible ? this.hideElement(elements) : this.showElement(elements);
+    isVisible ? this.displayDownArrow() : this.displayUpArrow();
 
     const row = this.element.closest("tr");
     if (row) {
-      row.classList.toggle("bg-silver", isExpanded);
-      row.classList.toggle("pb-bg-row-white", !isExpanded);
+      row.classList.toggle("bg-silver", !isVisible);
+      row.classList.toggle("pb-bg-row-white", isVisible);
     }
 
     this.addBorderRadiusOnLastVisibleRow();
   }
 
   displayDownArrow() {
-    setArrowVisibility({
-      rootElement: this.element,
-      downSelector: DOWN_ARROW_SELECTOR,
-      upSelector: UP_ARROW_SELECTOR,
-      showDownArrow: true,
-    });
+    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display =
+      "inline-block";
+    this.element.querySelector(UP_ARROW_SELECTOR).style.display = "none";
   }
 
   displayUpArrow() {
-    setArrowVisibility({
-      rootElement: this.element,
-      downSelector: DOWN_ARROW_SELECTOR,
-      upSelector: UP_ARROW_SELECTOR,
-      showDownArrow: false,
-    });
+    this.element.querySelector(UP_ARROW_SELECTOR).style.display =
+      "inline-block";
+    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = "none";
   }
 
   static handleToggleAllHeaders(element) {
@@ -585,19 +500,3 @@ window.expandAllRows = (element) => {
 window.expandAllSubRows = (element, rowDepth) => {
   PbAdvancedTable.handleToggleAllSubRows(element, rowDepth);
 };
-
-// Fix header height and pinned row sticky tops on load (header wrap + collapsed rows)
-function updateAllAdvancedTableStickyHeights() {
-  document.querySelectorAll(".pb_advanced_table").forEach((wrapper) => {
-    PbAdvancedTable.updateStickyHeaderRowHeights(wrapper);
-    PbAdvancedTable.updatePinnedRowsStickyTops(wrapper);
-  });
-}
-
-if (typeof document !== "undefined") {
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", updateAllAdvancedTableStickyHeights);
-  } else {
-    updateAllAdvancedTableStickyHeights();
-  }
-}