playbook_ui 14.23.0.pre.alpha.PLAY2205atborderbug9085 → 14.23.0.pre.alpha.PLAY2283multiheaderverticalbordersdoc9335

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column_for_multi_column.jsx

@@ -0,0 +1,80 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableSortPerColumnForMultiColumn = (props) => {
+const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          label: "Enrollment Stats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              label: "New Enrollments",
+              enableSort: true,
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          label: "Completion Metrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              label: "Completed Classes",
+              enableSort: true,
+            },
+            {
+              accessor: "classCompletionRate",
+              label: "Class Completion Rate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          columns: [
+            {
+              accessor: "attendanceRate",
+              label: "Attendance Rate",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableSortingRemoval
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableSortPerColumnForMultiColumn;

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column_for_multi_column.md

@@ -0,0 +1 @@
+Sorting on columns can also be applied to columns when using the multi-header variant, however in this case sorting can only be set on leaf columns NOT on parent columns. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.jsx

@@ -0,0 +1,107 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import Icon from "../../pb_icon/_icon"
+import Flex from "../../pb_flex/_flex"
+import Caption from "../../pb_caption/_caption"
+import Tooltip from "../../pb_tooltip/_tooltip"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableWithCustomHeaderMultiHeader = (props) => {
+
+const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      id: "year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      id: "enrollmentData",
+      header: () => (
+        <Flex alignItems="center" 
+            justifyContent="center"
+        >
+          <Caption marginRight="xs">Enrollments Data</Caption>
+          <Tooltip placement="top" 
+              text="Whoa. I'm a Tooltip" 
+              zIndex={10}
+          >
+            <Icon cursor="pointer" 
+                icon="info"
+                size="xs" 
+            />
+          </Tooltip>
+        </Flex>
+      ),
+      columns: [
+        {
+          label: "Enrollment Stats",
+          id: "enrollmentStats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              id: "newEnrollments",
+              label: "New Enrollments",
+            },
+            {
+              accessor: "scheduledMeetings",
+              id: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      id: "performanceData",
+      columns: [
+        {
+          label: "Completion Metrics",
+          id: "completionMetrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              label: "Completed Classes",
+              id: "completedClasses",
+            },
+            {
+              accessor: "classCompletionRate",
+              label: "Class Completion Rate",
+              id: "classCompletionRate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          id: "attendance",
+          columns: [
+            {
+              accessor: "attendanceRate",
+              label: "Attendance Rate",
+              id: "attendanceRate",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+              id: "scheduledMeetings",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableWithCustomHeaderMultiHeader;

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.md

@@ -0,0 +1 @@
+The optional `header` key/value pair within `columnDefinitions` can also be used with multi headers as seen here. 

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

@@ -13,6 +13,7 @@ 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)
@@ -29,6 +30,8 @@ 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
@@ -43,6 +46,7 @@ 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
@@ -50,6 +54,7 @@ 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

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

@@ -21,6 +21,7 @@ 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'
@@ -40,3 +41,6 @@ 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'

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

@@ -2,7 +2,6 @@ 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() {
@@ -37,9 +36,12 @@ 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(SELECT_ALL_SELECTOR);
+      const allCb = e.target.closest(selectAllSelector);
       if (!rowCb && !allCb) return;
 
       if (rowCb) {
@@ -50,15 +52,6 @@ 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,6 +39,70 @@ 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
@@ -47,75 +111,6 @@ 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;
@@ -141,49 +136,6 @@ 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();
 
@@ -249,8 +201,11 @@ export default class PbAdvancedTable extends PbEnhancedElement {
             this.handleCheckboxClick({ currentTarget: cb });
           }
         });
-        this.updateTableSelectedRowsAttribute();
-        updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
+        
+        // Recalculate the count to ensure all checkboxes are properly tracked
+        setTimeout(() => {
+          this.recalculateSelectedCount();
+        }, 0);
         return;
       }
 
@@ -258,17 +213,41 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       const rowLabel = checkbox.closest("label[data-row-id]");
       if (rowLabel) {
         this.handleCheckboxClick({ currentTarget: checkbox });
-        this.updateTableSelectedRowsAttribute();
+        
+        // Recalculate the count to ensure all checkboxes are properly tracked
+        setTimeout(() => {
+          this.recalculateSelectedCount();
+        }, 0);
+      }
+    });
 
-        // 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);
-        }
+    // 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;
+
+      // 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);
       }
     });
 
@@ -314,12 +293,16 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         "tr.is-visible, tr:not(.toggle-content)"
       );
 
-      visibleRows.forEach((row) => row.classList.remove("last-visible-row"));
+      visibleRows.forEach((row) => {
+        row.classList.remove("last-visible-row");
+        row.classList.remove("last-row-cell");
+      });
 
       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/table_body.rb

@@ -40,13 +40,14 @@ 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: {})
+      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)
         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 = {
@@ -55,7 +56,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 }) 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, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
 
         current_data_attributes = if current_depth.zero?
                                     {
@@ -68,7 +69,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 })
+        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 })
 
         if row[:children].present?
           row[:children].each do |child_row|
@@ -83,7 +84,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)
+            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])
           end
         end
 

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

@@ -3,6 +3,8 @@
 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,
@@ -56,8 +58,10 @@ module Playbook
                      classname: additional_classes.join(" "),
                    }) do
             pb_rails("checkbox", props: {
-                       id: "select-all-rows",
-                       name: "select-all-rows",
+                       id: "#{id ? "#{id}-" : ''}select-all-rows",
+                       indeterminate_main: true,
+                       indeterminate_main_labels: ["", ""],
+                       name: "#{id ? "#{id}-" : ''}select-all-rows",
                      })
           end
         end
@@ -67,8 +71,10 @@ module Playbook
       def render_select_all_checkbox
         if selectable_rows
           pb_rails("checkbox", props: {
-                     id: "select-all-rows",
-                     name: "select-all-rows",
+                     id: "#{id ? "#{id}-" : ''}select-all-rows",
+                     indeterminate_main: true,
+                     indeterminate_main_labels: ["", ""],
+                     name: "#{id ? "#{id}-" : ''}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-down", cursor: "pointer" }) %>
+                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
                                 </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? %>