playbook_ui 14.22.0.pre.alpha.testdialog8898 → 14.22.0.pre.rc.0

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

@@ -47,14 +47,14 @@ const CustomActions = () => {
       <CircleIconButton
           icon="file-csv"
           onClick={() =>
-            alert(rowIds.length === 0 ? "No Selection Made" : 'Row ids ' + rowIds.join(", ") + 'will be exported!')
+            alert(rowIds.length === 0 ? "No Selection Made" : `Row ids ${rowIds.join(", ")} will be exported!`)
           }
           variant="link"
       />
       <CircleIconButton
           icon="trash-alt"
           onClick={() =>
-            alert(rowIds.length === 0 ? "No Selection Made" : 'Row ids ' + rowIds.join(", ") + 'will be deleted!')
+            alert(rowIds.length === 0 ? "No Selection Made" : `Row ids ${rowIds.join(", ")} will be deleted!`)
           }
           variant="link"
         />

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

@@ -88,11 +88,10 @@ actions = [
     if (!selectedRowIds || selectedRowIds.length === 0) {
       alert('No Selection Made');
     } else {
-      const selectedRowsString = selectedRowIds.join(', ');
       if (actionType === 'export') {
-        alert('Row ids ' + selectedRowsString + ' will be exported!');
+        alert(`Row ids ${selectedRowIds.join(', ')} will be exported!`);
       } else if (actionType === 'delete') {
-        alert('Row ids ' + selectedRowsString + ' will be deleted!');
+        alert(`Row ids ${selectedRowIds.join(', ')} will be deleted!`);
       }
     }
   };

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

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>

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

@@ -19,15 +19,12 @@ examples:
   - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
-  - advanced_table_column_styling_rails: Column Styling
-  - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
 
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State
   - advanced_table_sort: Enable Sorting
   - advanced_table_sort_control: Sort Control
-  - advanced_table_custom_sort: Custom Sort
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers
@@ -41,7 +38,6 @@ examples:
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
-  - advanced_table_with_custom_header: Custom Header Cell
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props
   - advanced_table_column_headers: Multi-Header Columns
@@ -61,7 +57,3 @@ examples:
   - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
   - advanced_table_pinned_rows: Pinned Rows
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
-  - advanced_table_row_styling: Row Styling
-  - advanced_table_column_styling: Column Styling
-  - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
-  - advanced_table_infinite_scroll: Infinite Scroll

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

@@ -34,9 +34,3 @@ export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table
 export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
 export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_rows.jsx'
 export { default as AdvancedTableScrollbarNone} from './_advanced_table_scrollbar_none.jsx'
-export { default as AdvancedTableRowStyling } from './_advanced_table_row_styling.jsx'
-export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
-export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
-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'

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

@@ -1,82 +1,106 @@
 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']";
+const FLAT_ADVANCED_TABLE_SELECTOR = "[data-flat-advanced-table-select]";
 
 export default class PbFlatAdvancedTable extends PbEnhancedElement {
   static get selector() {
-    return FLAT_SELECTOR;
+    return FLAT_ADVANCED_TABLE_SELECTOR;
   }
 
-  constructor(...args) {
-    super(...args);
-    // keep track of selected IDs per-table-instance
-    this.selectedRows = new Set();
+  get target() {
+    const table = this.element.closest("table");
+    return table.querySelectorAll(
+      `"label[data-flat-advanced-table-select='true']"`
+    );
   }
 
+  static selectedRows = new Set();
+
   connect() {
     const table = this.element.closest("table");
-    if (!table || table.dataset.flatAdvancedInit) return;
-    table.dataset.flatAdvancedInit = "true";
-
-    // Reference to outer container for action bar
+    if (!table) return;
     const mainTable = this.element.closest(".pb_advanced_table");
-    // This so it is hidden on first render
-    if (mainTable) {
-      updateSelectionActionBar(mainTable, 0);
-    }
+    // Prevent double-init
+    if (table.dataset.flatAdvancedTableInitialized) return;
+    table.dataset.flatAdvancedTableInitialized = "true";
 
-    const updateCheckboxState = () => {
-      // Sync dataset on main table
-      if (mainTable) {
+    const checkboxLabels = table.querySelectorAll(
+      "label[data-flat-advanced-table-select='true']"
+    );
+    checkboxLabels.forEach((label) => {
+      const checkbox = label.querySelector("input[type='checkbox']");
+      if (!checkbox) return;
+      checkbox.addEventListener("change", () => {
+        const rowId = checkbox.id;
+        const isChecked = checkbox.checked;
+      
+        if (isChecked) {
+          PbFlatAdvancedTable.selectedRows.add(rowId);
+        } else {
+          PbFlatAdvancedTable.selectedRows.delete(rowId);
+        }
+      
+        // Update row background color based on checkbox state
+        const rowEl = checkbox.closest("tr");
+        if (rowEl) {
+          if (isChecked) {
+            rowEl.classList.add("bg-row-selection");
+            rowEl.classList.remove("bg-white");
+          } else {
+            rowEl.classList.remove("bg-row-selection");
+            rowEl.classList.add("bg-white");
+          }
+        }
+        const allCheckboxes = table.querySelectorAll(
+          "label[data-flat-advanced-table-select='true'] input[type='checkbox']"
+        );
+      
+        const selectAllInput = table.querySelector(
+          "#select-all-rows input[type='checkbox']"
+        );
+      
+        if (selectAllInput) {
+          const allChecked = Array.from(allCheckboxes).every(cb => cb.checked);
+          selectAllInput.checked = allChecked;
+        }
+      
         mainTable.dataset.selectedRows = JSON.stringify(
-          Array.from(this.selectedRows)
+          Array.from(PbFlatAdvancedTable.selectedRows)
         );
-        updateSelectionActionBar(mainTable, this.selectedRows.size);
-      }
-    };
-
-    table.addEventListener("change", (e) => {
-      const rowCb = e.target.closest(FLAT_SELECTOR + " input[type='checkbox']");
-      const allCb = e.target.closest(SELECT_ALL_SELECTOR);
-      if (!rowCb && !allCb) return;
-
-      if (rowCb) {
-        const id = rowCb.id;
-        if (rowCb.checked) this.selectedRows.add(id);
-        else this.selectedRows.delete(id);
+      });
+      
+    });
 
-        const tr = rowCb.closest("tr");
-        tr?.classList.toggle("bg-row-selection", rowCb.checked);
-        tr?.classList.toggle("bg-white", !rowCb.checked);
+    // Handle select-all checkbox
+    const selectAllWrapper = table.querySelector("#select-all-rows");
+    if (selectAllWrapper) {
+      const selectAllInput = selectAllWrapper.querySelector(
+        'input[type="checkbox"]'
+      );
+      selectAllInput.addEventListener("change", () => {
+        const checkAll = selectAllInput.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;
-        }
-      }
+        checkboxLabels.forEach((label) => {
+          const cb = label.querySelector("input[type='checkbox']");
+          cb.checked = checkAll;
+          const rowId = cb.id;
+          const rowEl = cb.closest("tr");
 
-      if (allCb) {
-        const checked = allCb.checked;
-        Array.from(
-          table.querySelectorAll(FLAT_SELECTOR + " input[type='checkbox']")
-        ).forEach((cb) => {
-          cb.checked = checked;
-          const tr = cb.closest("tr");
-          tr?.classList.toggle("bg-row-selection", checked);
-          tr?.classList.toggle("bg-white", !checked);
-          const id = cb.id;
-          if (checked) this.selectedRows.add(id);
-          else this.selectedRows.delete(id);
+          if (checkAll) {
+            PbFlatAdvancedTable.selectedRows.add(rowId);
+            rowEl?.classList.add("bg-row-selection");
+            rowEl?.classList.remove("bg-white");
+          } else {
+            PbFlatAdvancedTable.selectedRows.delete(rowId);
+            rowEl?.classList.remove("bg-row-selection");
+            rowEl?.classList.add("bg-white");
+          }
         });
-      }
 
-      updateCheckboxState();
-    });
+        mainTable.dataset.selectedRows = JSON.stringify(
+          Array.from(PbFlatAdvancedTable.selectedRows)
+        );
+      });
+    }
   }
 }

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

@@ -1,5 +1,4 @@
 import PbEnhancedElement from "../pb_enhanced_element";
-import { updateSelectionActionBar } from "./advanced_table_action_bar";
 
 const ADVANCED_TABLE_SELECTOR = "[data-advanced-table]";
 const DOWN_ARROW_SELECTOR = "#advanced-table_open_icon";
@@ -10,33 +9,9 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     return ADVANCED_TABLE_SELECTOR;
   }
 
-  static expandedRows = new Set();
-  static selectedRows = new Set();
-  static isCollapsing = false;
-
-  constructor(...args) {
-    super(...args);
-    // Map parent row ID to array of its child rows
-    this.childRowsMap = new Map();
-  }
-
-  // Fetch and cache child rows for a given parent row ID
-  childRowsFor(parentId) {
-    if (!this.childRowsMap.has(parentId)) {
-      const table = this.element.closest("table");
-      const rows = Array.from(
-        table.querySelectorAll(`tr[data-row-parent="${parentId}"]`)
-      );
-      this.childRowsMap.set(parentId, rows);
-    }
-    return this.childRowsMap.get(parentId);
-  }
-
   updateTableSelectedRowsAttribute() {
     const mainTable = this.element.closest(".pb_advanced_table");
-    mainTable.dataset.selectedRows = JSON.stringify(
-      Array.from(PbAdvancedTable.selectedRows)
-    );
+    mainTable.dataset.selectedRows = JSON.stringify(Array.from(PbAdvancedTable.selectedRows));
   }
 
   // Check if the row is expanded or collapsed
@@ -129,7 +104,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     } else {
       PbAdvancedTable.selectedRows.delete(rowId);
     }
-    // Update background color on row
+     // Update background color on row
     if (!isChecked) {
       rowEl.classList.remove("bg-row-selection");
 
@@ -201,129 +176,99 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       );
       selectAllInput.checked = allChecked;
     }
-    updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
   }
 
   get target() {
-    return this.childRowsFor(this.element.id) || [];
+    const table = this.element.closest("table");
+    return table.querySelectorAll(`[data-row-parent="${this.element.id}"]`);
   }
 
+  static expandedRows = new Set();
+  static selectedRows = new Set();
+  static isCollapsing = false;
+
   connect() {
-    const table = this.element.closest("table");
+    this.element.addEventListener("click", () => {
+      if (!PbAdvancedTable.isCollapsing) {
+        const isExpanded =
+          this.element.querySelector(UP_ARROW_SELECTOR).style.display ===
+          "inline-block";
+        if (!isExpanded) {
+          PbAdvancedTable.expandedRows.add(this.element.id);
+        } else {
+          PbAdvancedTable.expandedRows.delete(this.element.id);
+        }
+        this.toggleElement(this.target);
+      }
+    });
 
     this.hideCloseIcon();
-    const mainTable = this.element.closest(".pb_advanced_table");
-    
-    // This so it is hidden on first render
-    if (mainTable) {
-      updateSelectionActionBar(mainTable);
-    }
 
-    // Precompute parent→child rows mapping once
-    table.querySelectorAll("tr[data-row-parent]").forEach((row) => {
-      const parentId = row.dataset.rowParent;
-      if (!this.childRowsMap.has(parentId)) {
-        this.childRowsMap.set(parentId, []);
-      }
-      this.childRowsMap.get(parentId).push(row);
-    });
+    const table = this.element.closest("table");
 
     // Prevent duplicate initialization
     if (table.dataset.pbAdvancedTableInitialized) return;
     table.dataset.pbAdvancedTableInitialized = "true";
 
-    // Delegate checkbox changes
-    table.addEventListener("change", (event) => {
-      const checkbox = event.target.closest('input[type="checkbox"]');
+    // Bind checkbox change handlers for all row checkboxes
+    const checkboxLabels = table.querySelectorAll("label[data-row-id]");
+    checkboxLabels.forEach((label) => {
+      const checkbox = label.querySelector("input[type='checkbox']");
       if (!checkbox) return;
-
-      // Header "select-all" logic
-      if (checkbox.closest("#select-all-rows")) {
-        const checkAll = checkbox.checked;
-        const rowCheckboxes = table.querySelectorAll(
-          'label[data-row-id] input[type="checkbox"]'
-        );
-        rowCheckboxes.forEach((cb) => {
-          if (cb.checked !== checkAll) {
-            cb.checked = checkAll;
-            this.handleCheckboxClick({ currentTarget: cb });
-          }
-        });
-        this.updateTableSelectedRowsAttribute();
-        updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
-        return;
-      }
-
-      // Individual row checkbox logic
-      const rowLabel = checkbox.closest("label[data-row-id]");
-      if (rowLabel) {
-        this.handleCheckboxClick({ currentTarget: checkbox });
-        this.updateTableSelectedRowsAttribute();
-
-        // 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);
-        }
-      }
+      checkbox.addEventListener("change", (event) => {
+        this.handleCheckboxClick(event);
+      });
     });
 
-    // Delegate expand/collapse toggles
-    table.addEventListener("click", (event) => {
-      const toggleBtn = event.target.closest("[data-advanced-table]");
-      if (!toggleBtn || PbAdvancedTable.isCollapsing) return;
-
-      // Temporarily bind `this.element` to the clicked toggle
-      const prevElement = this.element;
-      this.element = toggleBtn;
-
-      // Update expandedRows set
-      const isExpanded =
-        toggleBtn.querySelector(UP_ARROW_SELECTOR).style.display ===
-        "inline-block";
-      if (!isExpanded) {
-        PbAdvancedTable.expandedRows.add(toggleBtn.id);
-      } else {
-        PbAdvancedTable.expandedRows.delete(toggleBtn.id);
-      }
-
-      // Find direct child rows
-      const childRows = Array.from(
-        table.querySelectorAll(`[data-row-parent="${toggleBtn.id}"]`)
-      );
-      this.toggleElement(childRows);
-
-      // Restore original element context
-      this.element = prevElement;
+    // Bind nested row expansion logic
+    const nestedButtons = table.querySelectorAll("[data-advanced-table]");
+    nestedButtons.forEach((button) => {
+      button.addEventListener("click", () => {
+        const isExpanded =
+          button.querySelector(UP_ARROW_SELECTOR).style.display === "inline-block";
+        if (isExpanded) {
+          PbAdvancedTable.expandedRows.add(button.id);
+        } else {
+          PbAdvancedTable.expandedRows.delete(button.id);
+        }
+      });
     });
 
-    this.addBorderRadiusOnLastVisibleRow();
-  }
-
-  addBorderRadiusOnLastVisibleRow() {
-    const parentElement = this.element.closest(".pb_advanced_table");
+    // Bind select-all logic for this table
+    const selectAllCheckbox = table.querySelector("#select-all-rows");
+    if (selectAllCheckbox) {
+      selectAllCheckbox.addEventListener("change", () => {
+        const checkboxInput = selectAllCheckbox.querySelector('input[type="checkbox"]');
+        const checkAll = checkboxInput.checked;
 
-    const table = document.getElementById(parentElement.id);
+        const checkboxes = Array.from(
+          table.querySelectorAll("label[data-row-id] input[type='checkbox']")
+        );
 
-    if (table) {
-      const visibleRows = table.querySelectorAll(
-        "tr.is-visible, tr:not(.toggle-content)"
-      );
+        checkboxes.forEach((cb) => {
+          cb.checked = checkAll;
+          const rowId = cb.id;
+          const rowEl = cb.closest("tr");
 
-      visibleRows.forEach((row) => row.classList.remove("last-visible-row"));
+          if (checkAll) {
+            PbAdvancedTable.selectedRows.add(rowId);
+            rowEl?.classList.add("bg-row-selection");
+            rowEl?.classList.remove("bg-white", "bg-silver");
+          } else {
+            PbAdvancedTable.selectedRows.delete(rowId);
+            rowEl?.classList.remove("bg-row-selection");
+            rowEl?.classList.add("bg-white");
+          }
+        });
 
-      const lastVisibleRow = visibleRows[visibleRows.length - 1];
+        checkboxes.forEach((cb) => this.updateParentCheckboxes(cb));
 
-      if (lastVisibleRow) {
-        lastVisibleRow.classList.add("last-visible-row");
-      }
+        this.updateTableSelectedRowsAttribute();
+      });
     }
   }
 
+
   hideCloseIcon() {
     const closeIcon = this.element.querySelector(UP_ARROW_SELECTOR);
     closeIcon.style.display = "none";
@@ -422,8 +367,6 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       row.classList.toggle("bg-silver", !isVisible);
       row.classList.toggle("bg-white", isVisible);
     }
-
-    this.addBorderRadiusOnLastVisibleRow();
   }
 
   displayDownArrow() {
@@ -506,6 +449,151 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   }
 }
 
+// Isolate action bar functionality so it doesn't mix with existing functionality
+class PbAdvancedTableActionBar {
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    // Initialize action bars for all advanced tables with action bars
+    document.addEventListener('DOMContentLoaded', () => {
+      this.setupActionBars();
+    });
+
+    // Also run immediately in case DOM is already loaded
+    if (document.readyState === 'loading') {
+      // DOM is still loading
+    } else {
+      // DOM is already loaded
+      this.setupActionBars();
+    }
+  }
+
+  setupActionBars() {
+    const advancedTables = document.querySelectorAll('.pb_advanced_table');
+
+    advancedTables.forEach(table => {
+      // Only proceed if this table has both selectable rows AND an action bar
+      if (!this.shouldEnableActionBar(table)) return;
+
+      const actionBar = table.querySelector('.row-selection-actions-card');
+      if (!actionBar) return; // Skip tables without action bars
+
+      // Initialize action bar styles
+      this.initializeActionBar(actionBar);
+
+      // Set up checkbox listeners for this table
+      this.setupCheckboxListeners(table, actionBar);
+    });
+  }
+
+  shouldEnableActionBar(table) {
+    // Check if the table has selectable rows
+    const hasSelectableRows = table.querySelector('input[type="checkbox"]') !== null;
+
+    // Check if the table has a row selection action bar (not other types of action bars)
+    const hasRowSelectionActionBar = table.querySelector('.row-selection-actions-card') !== null;
+
+    // Additional check: look for the presence of row checkboxes with data-row-id
+    const hasRowCheckboxes = table.querySelector('label[data-row-id] input[type="checkbox"]') !== null;
+
+    // Only enable if ALL conditions are met:
+    // 1. Has selectable checkboxes
+    // 2. Has the specific row selection action bar
+    // 3. Has row checkboxes (not just other types of checkboxes)
+    return hasSelectableRows && hasRowSelectionActionBar && hasRowCheckboxes;
+  }
+
+  initializeActionBar(actionBar) {
+    // Set initial hidden state
+    Object.assign(actionBar.style, {
+      height: '0px',
+      overflow: 'hidden',
+      display: 'block',
+      opacity: '0'
+    });
+
+    // Remove any visibility classes
+    actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
+    actionBar.classList.add("p_none");
+  }
+
+  setupCheckboxListeners(table, actionBar) {
+    // Only listen to row checkboxes (those with data-row-id), not all checkboxes
+    const rowCheckboxes = table.querySelectorAll('label[data-row-id] input[type="checkbox"]');
+
+    rowCheckboxes.forEach(checkbox => {
+      checkbox.addEventListener('change', () => {
+        // Use setTimeout to ensure this runs after the main checkbox logic
+        setTimeout(() => {
+          this.updateActionBarVisibility(table, actionBar);
+        }, 0);
+      });
+    });
+
+    // Special handling for select-all checkbox (only if it exists)
+    const selectAllCheckbox = table.querySelector("#select-all-rows");
+    if (selectAllCheckbox) {
+      const selectAllInput = selectAllCheckbox.querySelector('input[type="checkbox"]');
+      if (selectAllInput) {
+        selectAllInput.addEventListener('change', () => {
+          // Use setTimeout to ensure this runs after the main select-all logic
+          setTimeout(() => {
+            this.updateActionBarVisibility(table, actionBar);
+          }, 10); // Slightly longer delay for select-all to ensure all row checkboxes are updated
+        });
+      }
+    }
+  }
+
+  updateActionBarVisibility(table, actionBar) {
+    // Only count row checkboxes (those with data-row-id), not all checkboxes
+    const rowCheckboxes = table.querySelectorAll('label[data-row-id] input[type="checkbox"]');
+
+    // Get all checked row checkboxes
+    const selectedRowCheckboxes = Array.from(rowCheckboxes).filter(cb => cb.checked);
+
+    // Get the selected count
+    const selectedCount = selectedRowCheckboxes.length;
+
+    if (selectedCount > 0) {
+      this.showActionBar(actionBar, selectedCount);
+    } else {
+      this.hideActionBar(actionBar);
+    }
+  }
+
+  showActionBar(actionBar, selectedCount) {
+    // Show action bar directly
+    actionBar.style.height = 'auto';
+    actionBar.style.overflow = 'visible';
+    actionBar.style.opacity = '1';
+    actionBar.style.transitionProperty = 'all';
+    actionBar.style.transitionTimingFunction = 'ease-in-out';
+    actionBar.classList.remove("p_none");
+    actionBar.classList.add("p_xs", "is-visible", "show-action-card");
+
+    // Update the count
+    const countElement = actionBar.querySelector(".selected-count");
+    if (countElement) {
+      countElement.textContent = `${selectedCount} Selected`;
+    }
+  }
+
+  hideActionBar(actionBar) {
+    // 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");
+  }
+}
+
+// Initialize the isolated action bar functionality
+new PbAdvancedTableActionBar();
+
 window.expandAllRows = (element) => {
   PbAdvancedTable.handleToggleAllHeaders(element);
 };