playbook_ui 14.24.0.pre.alpha.testingwithoutlazyload9529 → 14.24.0.pre.rc.0

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

@@ -124,23 +124,6 @@ const columnDefinitions = [
   },
 ]
 
-const columnDefinitionsSort = [
-  {
-    accessor: "year",
-    label: "Year",
-    cellAccessors: ["quarter", "month", "day"],
-  },
-  {
-    accessor: "newEnrollments",
-    label: "New Enrollments",
-    enableSort: true,
-  },
-  {
-    accessor: "scheduledMeetings",
-    label: "Scheduled Meetings",
-  },
-];
-
 const columnDefinitionsCustomRenderer = [
   {
     accessor: "year",
@@ -651,36 +634,6 @@ test("columnStyling.cellAlignment sets each <td> align attribute as expected", (
   expect(firstEnrollmentCell).toHaveAttribute("align", "left");
 });
 
-test("columnStyling.cellPadding sets cell padding", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling: { cellPadding: "none" },
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
-  expect(firstEnrollmentCell).toHaveClass('p_none')
-});
-
 test("renders virtualized table rows and header", () => {
   render(
     <AdvancedTable
@@ -723,46 +676,3 @@ test("rowStyling prop works as expected", () => {
   const row1 = tableBody.querySelector('tr:nth-child(1)') 
   expect(row1).toHaveStyle({backgroundColor: colors.white, color: colors.black})
 })
-
-test("rowStyling prop to allow padding control", () => {
-  const rowStyling = [
-  {
-    rowId: "1",
-    cellPadding: "lg"
-  },
-];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        rowStyling={rowStyling}
-        tableData={MOCK_DATA_WITH_ID}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const tableBody = kit.querySelector('tbody')
-  const row1 = tableBody.querySelector('tr:nth-child(1)') 
-   const cells = row1.querySelectorAll("td");
-  cells.forEach((cell) => {
-    expect(cell.classList.contains("p_lg")).toBe(true);
-  });
-})
-
-test("Sort icon renders with enableSort on individual columns", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitionsSort}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const kit = screen.getByTestId(testId);
-  const sortIcon = kit.querySelector(".sort-button-icon");
-  expect(sortIcon).toBeInTheDocument();
-  const sortButton = kit.querySelector(".header-sort-secondary-columns");
-  expect(sortButton).toBeInTheDocument();
-});
-

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

@@ -1,7 +1,4 @@
 function showActionBar(actionBar, selectedCount) {
-  // Get container
-  const tableContainer = actionBar.closest('.pb_advanced_table');
-
   // Show action bar directly
   actionBar.style.height = "auto";
   actionBar.style.overflow = "visible";
@@ -11,11 +8,6 @@ function showActionBar(actionBar, selectedCount) {
   actionBar.classList.remove("p_none");
   actionBar.classList.add("p_xs", "is-visible", "show-action-card");
 
-  // Remove hidden-action-bar class when action bar is shown
-  if (tableContainer) {
-    tableContainer.classList.remove("hidden-action-bar");
-  }
-
   // Update the count
   const countElement = actionBar.querySelector(".selected-count");
   if (countElement) {
@@ -24,20 +16,12 @@ function showActionBar(actionBar, selectedCount) {
 }
 
 function hideActionBar(actionBar) {
-  // Get container
-  const tableContainer = actionBar.closest('.pb_advanced_table');
-
   // Hide action bar directly
   actionBar.style.height = "0px";
   actionBar.style.overflow = "hidden";
   actionBar.style.opacity = "0";
   actionBar.classList.add("p_none");
   actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
-
-  // Add hidden-action-bar class when action bar is hidden
-  if (tableContainer) {
-    tableContainer.classList.add("hidden-action-bar");
-  }
 }
 
 export function updateSelectionActionBar(table, selectedCount) {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header_rails.html.erb

@@ -31,7 +31,7 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: {
-  id: "selectable_rows_with_header_no_action_bar",
+  id: "selectable_rows_with_actions",
   table_data: @table_data_no_subrows,
   column_definitions: column_definitions,
   selectable_rows: true,

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.html.erb

@@ -34,6 +34,6 @@
 %>
 
 <%= pb_rails("advanced_table", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, selectable_rows: true }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { id: "selectable_rows", column_definitions: column_definitions, selectable_rows: true }) %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions, selectable_rows: true }) %>
   <%= pb_rails("advanced_table/table_body", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all", selectable_rows: true }) %>
 <% end %>

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

@@ -13,7 +13,6 @@ examples:
   - advanced_table_with_custom_header_rails: Custom Header Cell
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
-  - advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders
   - advanced_table_no_subrows: Table with No Subrows or Expansion
   - advanced_table_selectable_rows_rails: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
@@ -30,8 +29,6 @@ examples:
   - advanced_table_default: Default (Required Props)
   - advanced_table_sort: Enable Sorting
   - advanced_table_sort_control: Sort Control
-  - 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_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth
@@ -46,7 +43,6 @@ examples:
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
   - advanced_table_with_custom_header: Custom Header Cell
-  - advanced_table_with_custom_header_multi_header: Custom Header with Multiple Headers
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props
   - advanced_table_loading: Loading State
@@ -54,7 +50,6 @@ examples:
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
-  - advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders
   - advanced_table_no_subrows: Table with No Subrows or Expansion
   - advanced_table_pinned_rows: Pinned Rows
   - advanced_table_selectable_rows: Selectable Rows
@@ -68,10 +63,8 @@ examples:
   - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
   - 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
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
-  - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color
   - advanced_table_fullscreen: Fullscreen
   - advanced_table_infinite_scroll: Infinite Scroll

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

@@ -21,7 +21,6 @@ export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
 export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
 export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
-export { default as AdvancedTableColumnHeadersVerticalBorder } from './_advanced_table_column_headers_vertical_border.jsx'
 export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
 export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
 export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
@@ -41,8 +40,3 @@ export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_
 export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'
 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 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'
-export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'

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

@@ -2,6 +2,7 @@ import PbEnhancedElement from "../pb_enhanced_element";
 import { updateSelectionActionBar } from "./advanced_table_action_bar";
 
 const FLAT_SELECTOR = "[data-flat-advanced-table-select='true']";
+const SELECT_ALL_SELECTOR = "#select-all-rows input[type='checkbox']";
 
 export default class PbFlatAdvancedTable extends PbEnhancedElement {
   static get selector() {
@@ -36,12 +37,9 @@ export default class PbFlatAdvancedTable extends PbEnhancedElement {
       }
     };
 
-    const selectAllId = this.element.getAttribute('data-pb-checkbox-indeterminate-parent')
-    const selectAllSelector = `#${selectAllId} input[type='checkbox']`
-
     table.addEventListener("change", (e) => {
       const rowCb = e.target.closest(FLAT_SELECTOR + " input[type='checkbox']");
-      const allCb = e.target.closest(selectAllSelector);
+      const allCb = e.target.closest(SELECT_ALL_SELECTOR);
       if (!rowCb && !allCb) return;
 
       if (rowCb) {
@@ -52,6 +50,15 @@ export default class PbFlatAdvancedTable extends PbEnhancedElement {
         const tr = rowCb.closest("tr");
         tr?.classList.toggle("bg-row-selection", rowCb.checked);
         tr?.classList.toggle("bg-white", !rowCb.checked);
+
+        // Sync header checkbox
+        const header = table.querySelector(SELECT_ALL_SELECTOR);
+        if (header) {
+          const all = Array.from(
+            table.querySelectorAll(FLAT_SELECTOR + " input[type='checkbox']")
+          ).every((cb) => cb.checked);
+          header.checked = all;
+        }
       }
 
       if (allCb) {

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

@@ -39,70 +39,6 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     );
   }
 
-  // Recalculate selected count based on all checked checkboxes
-  recalculateSelectedCount() {
-    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
-    const rowCheckboxes = table.querySelectorAll(
-      'label[data-row-id] input[type="checkbox"]'
-    );
-    
-    // Also get any checkboxes that might be parent checkboxes (those with data-pb-checkbox-indeterminate-main)
-    // But exclude the select-all checkbox itself from the count
-    const parentCheckboxes = table.querySelectorAll(
-      '[data-pb-checkbox-indeterminate-main="true"] input[type="checkbox"]'
-    );
-    
-    // Filter out the select-all checkbox from parent checkboxes
-    const selectAllCheckbox = table.querySelector('#select-all-rows input[type="checkbox"]');
-    const filteredParentCheckboxes = Array.from(parentCheckboxes).filter(checkbox => 
-      checkbox !== selectAllCheckbox && !checkbox.id.includes('select-all-rows')
-    );
-    
-    // Combine all checkboxes and remove duplicates
-    const allCheckboxes = new Set([...rowCheckboxes, ...filteredParentCheckboxes]);
-    
-    // Clear the selectedRows Set and rebuild it from checked checkboxes
-    PbAdvancedTable.selectedRows.clear();
-    
-    allCheckboxes.forEach((checkbox) => {
-      const rowEl = checkbox.closest("tr");
-      const isChecked = checkbox.checked;
-      
-      if (isChecked) {
-        PbAdvancedTable.selectedRows.add(checkbox.id);
-        // Only apply styling if the checkbox is inside a table row
-        if (rowEl) {
-          rowEl.classList.add("bg-row-selection");
-          rowEl.classList.remove("bg-white", "bg-silver");
-        }
-      } else {
-        // Only apply styling if the checkbox is inside a table row
-        if (rowEl) {
-          rowEl.classList.remove("bg-row-selection");
-          
-          if (this.isRowExpanded(rowEl)) {
-            rowEl.classList.remove("bg-silver");
-            rowEl.classList.add("bg-white");
-          } else {
-            rowEl.classList.remove("bg-white");
-            rowEl.classList.add("bg-silver");
-          }
-        }
-      }
-    });
-    
-    this.updateTableSelectedRowsAttribute();
-    updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
-    
-    // Sync header select-all state
-    if (selectAllCheckbox) {
-      selectAllCheckbox.checked = Array.from(rowCheckboxes).every((cb) => cb.checked);
-    }
-  }
-
   // Check if the row is expanded or collapsed
   // This is used to determine the background color of the row
   // when the checkbox is checked or unchecked
@@ -111,6 +47,75 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     return closeIcon?.style.display === "none" || !closeIcon;
   }
 
+  updateParentCheckboxes(checkbox) {
+    const rowEl = checkbox.closest("tr");
+    if (!rowEl) return;
+
+    const table = rowEl.closest("table");
+    if (!table) return;
+
+    const contentTrail = rowEl.dataset.advancedTableContent;
+    if (!contentTrail) return;
+
+    const ancestorIds = contentTrail.split("-").slice(0, -1);
+
+    ancestorIds.reverse();
+    ancestorIds.forEach((ancestorId) => {
+      const parentRowSelector = `[data-advanced-table-content$="${ancestorId}"]`;
+      const parentRow = table.querySelector(parentRowSelector);
+      if (!parentRow) return;
+
+      const parentLabel = parentRow.querySelector("label[data-row-id]");
+      if (!parentLabel) return;
+
+      const parentCheckbox = parentLabel.querySelector(
+        "input[type='checkbox']"
+      );
+      if (!parentCheckbox) return;
+
+      // Find all immediate children of parent linked to ancestor Id, filter our subrow headers
+      const children = Array.from(
+        table.querySelectorAll(`tr[data-row-parent$="_${ancestorId}"]`)
+      ).filter((child) => {
+        const content = child.dataset.advancedTableContent;
+        return !(content && content.endsWith("sr"));
+      });
+
+      const allChildrenChecked = Array.from(children).every((child) => {
+        const childLabel = child.querySelector("label[data-row-id]");
+        if (!childLabel) return false;
+        const childCheckbox = childLabel.querySelector(
+          "input[type='checkbox']"
+        );
+        if (!childCheckbox) return false;
+        return childCheckbox.checked;
+      });
+
+      // Update parent checkbox
+      parentCheckbox.checked = allChildrenChecked;
+
+      const parentCheckboxId = parentCheckbox.id;
+      if (allChildrenChecked) {
+        PbAdvancedTable.selectedRows.add(parentCheckboxId);
+        parentRow.classList.add("bg-row-selection");
+        parentRow.classList.remove("bg-white", "bg-silver");
+      } else {
+        PbAdvancedTable.selectedRows.delete(parentCheckboxId);
+      }
+      if (!allChildrenChecked) {
+        parentRow.classList.remove("bg-row-selection");
+
+        if (this.isRowExpanded(parentRow)) {
+          parentRow.classList.remove("bg-silver");
+          parentRow.classList.add("bg-white");
+        } else {
+          parentRow.classList.remove("bg-white");
+          parentRow.classList.add("bg-silver");
+        }
+      }
+    });
+  }
+
   handleCheckboxClick(event) {
     const checkbox = event.currentTarget;
     const rowId = checkbox.id;
@@ -136,6 +141,49 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         rowEl.classList.add("bg-silver");
       }
     }
+    if (rowEl) {
+      const table = rowEl.closest("table");
+      const rowContent = rowEl.dataset.advancedTableContent;
+
+      if (rowContent) {
+        const childRows = table.querySelectorAll(
+          `[data-advanced-table-content^="${rowContent}-"]`
+        );
+
+        childRows.forEach((childRow) => {
+          const label = childRow.querySelector("label[data-row-id]");
+          if (!label) return;
+
+          const childCheckbox = label.querySelector("input[type='checkbox']");
+          if (!childCheckbox) return;
+
+          childCheckbox.checked = isChecked;
+
+          const childRowId = childCheckbox.id;
+          const childRowEl = childCheckbox.closest("tr");
+          if (isChecked) {
+            PbAdvancedTable.selectedRows.add(childRowId);
+            childRowEl?.classList.add("bg-row-selection");
+            childRowEl?.classList.remove("bg-white", "bg-silver");
+          } else {
+            PbAdvancedTable.selectedRows.delete(childRowId);
+          }
+          if (!isChecked) {
+            childRowEl?.classList.remove("bg-row-selection");
+
+            if (this.isRowExpanded(childRowEl)) {
+              childRowEl?.classList.remove("bg-silver");
+              childRowEl?.classList.add("bg-white");
+            } else {
+              childRowEl?.classList.remove("bg-white");
+              childRowEl?.classList.add("bg-silver");
+            }
+          }
+        });
+      }
+    }
+
+    this.updateParentCheckboxes(checkbox);
 
     this.updateTableSelectedRowsAttribute();
 
@@ -201,11 +249,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
             this.handleCheckboxClick({ currentTarget: cb });
           }
         });
-        
-        // Recalculate the count to ensure all checkboxes are properly tracked
-        setTimeout(() => {
-          this.recalculateSelectedCount();
-        }, 0);
+        this.updateTableSelectedRowsAttribute();
+        updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
         return;
       }
 
@@ -213,41 +258,17 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       const rowLabel = checkbox.closest("label[data-row-id]");
       if (rowLabel) {
         this.handleCheckboxClick({ currentTarget: checkbox });
-        
-        // Recalculate the count to ensure all checkboxes are properly tracked
-        setTimeout(() => {
-          this.recalculateSelectedCount();
-        }, 0);
-      }
-    });
-
-    // If a parent checkbox changed a checkbox, update styling
-    // Listen for programmatic checkbox changes from parent-child relationships
-    table.addEventListener("checkbox-programmatic-change", (event) => {
-      const checkbox = event.target;
-      if (!checkbox || checkbox.type !== 'checkbox') return;
+        this.updateTableSelectedRowsAttribute();
 
-      // Individual row checkbox logic
-      const rowLabel = checkbox.closest("label[data-row-id]");
-      if (rowLabel) {
-        this.handleCheckboxClick({ currentTarget: checkbox });
-      }
-      
-      // Recalculate the count to ensure all programmatically changed checkboxes are included
-      setTimeout(() => {
-        this.recalculateSelectedCount();
-      }, 10); // Slightly longer delay to ensure all changes are processed
-    });
-
-
-    // Also listen for all checkbox changes to ensure we catch everything
-    table.addEventListener("change", (event) => {
-      const checkbox = event.target;
-      if (checkbox && checkbox.type === 'checkbox') {
-        // Force recalculation after a short delay to ensure all changes are processed
-        setTimeout(() => {
-          this.recalculateSelectedCount();
-        }, 50);
+        // Sync header select-all state
+        const selectAllInput = table.querySelector(
+          '#select-all-rows input[type="checkbox"]'
+        );
+        if (selectAllInput) {
+          selectAllInput.checked = Array.from(
+            table.querySelectorAll('label[data-row-id] input[type="checkbox"]')
+          ).every((cb) => cb.checked);
+        }
       }
     });
 
@@ -293,16 +314,12 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         "tr.is-visible, tr:not(.toggle-content)"
       );
 
-      visibleRows.forEach((row) => {
-        row.classList.remove("last-visible-row");
-        row.classList.remove("last-row-cell");
-      });
+      visibleRows.forEach((row) => row.classList.remove("last-visible-row"));
 
       const lastVisibleRow = visibleRows[visibleRows.length - 1];
 
       if (lastVisibleRow) {
         lastVisibleRow.classList.add("last-visible-row");
-        lastVisibleRow.classList.add("last-row-cell");
       }
     }
   }

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss

@@ -79,14 +79,8 @@
     left: 0;
     border-radius: unset;
     z-index: 5;
-
-    // Add proper border radius when action bar is visible
-    &.is-visible,
-    &.show-action-card {
-      border-top-left-radius: 4px !important;
-      border-top-right-radius: 4px !important;
-    }
   }
+
   .checkbox-cell {
     display: table-cell !important;
   }

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

@@ -40,14 +40,13 @@ module Playbook
         end.compact
       end
 
-      def render_row_and_children(row, column_definitions, current_depth, first_parent_child, ancestor_ids = [], top_parent_id = nil, additional_classes: "", table_data_attributes: {}, immediate_parent_row_id: nil)
+      def render_row_and_children(row, column_definitions, current_depth, first_parent_child, ancestor_ids = [], top_parent_id = nil, additional_classes: "", table_data_attributes: {})
         top_parent_id ||= row.object_id
         new_ancestor_ids = ancestor_ids + [row.object_id]
         leaf_columns = flatten_columns(column_definitions)
 
         output = ActiveSupport::SafeBuffer.new
         is_first_child_of_subrow = current_depth.positive? && first_parent_child && subrow_headers[current_depth - 1].present?
-        last_row = subrow_headers.length == current_depth
 
         subrow_ancestor_ids = ancestor_ids + ["#{row.object_id}sr"]
         subrow_data_attributes = {
@@ -56,7 +55,7 @@ module Playbook
           row_parent: "#{id}_#{ancestor_ids.last}",
         }
         # Subrow header if applicable
-        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", responsive: responsive, subrow_data_attributes: subrow_data_attributes, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
+        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", responsive: responsive, subrow_data_attributes: subrow_data_attributes }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
 
         current_data_attributes = if current_depth.zero?
                                     {
@@ -69,7 +68,7 @@ module Playbook
                                   end
 
         # Additional class and data attributes needed for toggle logic
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id })
+        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling })
 
         if row[:children].present?
           row[:children].each do |child_row|
@@ -84,7 +83,7 @@ module Playbook
               advanced_table_content: data_content,
             }
 
-            output << render_row_and_children(child_row, column_definitions, current_depth + 1, is_first_child, new_ancestor_ids, top_parent_id, additional_classes: "toggle-content", table_data_attributes: child_data_attributes, immediate_parent_row_id: row[:id])
+            output << render_row_and_children(child_row, column_definitions, current_depth + 1, is_first_child, new_ancestor_ids, top_parent_id, additional_classes: "toggle-content", table_data_attributes: child_data_attributes)
           end
         end
 

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

@@ -3,8 +3,6 @@
 module Playbook
   module PbAdvancedTable
     class TableHeader < Playbook::KitBase
-      prop :id, type: Playbook::Props::String,
-                default: ""
       prop :column_definitions, type: Playbook::Props::Array,
                                 default: []
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
@@ -58,10 +56,8 @@ module Playbook
                      classname: additional_classes.join(" "),
                    }) do
             pb_rails("checkbox", props: {
-                       id: "#{id ? "#{id}-" : ''}select-all-rows",
-                       indeterminate_main: true,
-                       indeterminate_main_labels: ["", ""],
-                       name: "#{id ? "#{id}-" : ''}select-all-rows",
+                       id: "select-all-rows",
+                       name: "select-all-rows",
                      })
           end
         end
@@ -71,10 +67,8 @@ module Playbook
       def render_select_all_checkbox
         if selectable_rows
           pb_rails("checkbox", props: {
-                     id: "#{id ? "#{id}-" : ''}select-all-rows",
-                     indeterminate_main: true,
-                     indeterminate_main_labels: ["", ""],
-                     name: "#{id ? "#{id}-" : ''}select-all-rows",
+                     id: "select-all-rows",
+                     name: "select-all-rows",
                      data: {
                        action: "click->pb-advanced-table#toggleAllRowSelection",
                      },

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

@@ -39,11 +39,11 @@
                                     style="color: <%= button_color %>"
                                 >
                                     <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
-                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
+                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play-down", cursor: "pointer" }) %>
                                 </button>
                             <% end %>
                         <% end %>
-                        <%= pb_rails("flex/flex_item") do %>       
+                        <%= pb_rails("flex/flex_item") do %>
                             <% if column[:custom_renderer].present? %>
                                 <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
                             <% elsif index.zero? %>