playbook_ui 16.4.0.pre.alpha.displaybreakpoints15091 → 16.4.0.pre.alpha.play2838formcustomvalidationsconsistency15140

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f4f468cd871371ba03a7e9cf2c14be1fbc8288c82d602c002d236c999249ae3e
-  data.tar.gz: 71dcca837b8732f4bab69f44d0ecbcc057ceaf2e711c249bcd88134e3cef6f0b
+  metadata.gz: eca9c4e210533f089680afa7791fdf3679c6c9548918571ab7ecd7b57bfa92da
+  data.tar.gz: 5c4d72efd74fe5d8a81c3354d1aeb3b092733a4b9f8ad860c5479ca0f29bc381
 SHA512:
-  metadata.gz: d8d9241711a074c871ecdb5a42e34c9135b8203a2e4b99f39b00fc0b5cee6363a49508b0c3775db90158f28d266dabc2c65d6b70a9487b01917eda4b9813a089
-  data.tar.gz: c11eefcc856323279d5ad899ca305c3ba2eb28cd9c1ee575f4952c57e247a8de6e78eb9aec8323502010b35e51bff170551051580658364774ba3250a553f30c
+  metadata.gz: a7cef2caa94eef888ad35f53c2d8a4a34b2999908fdfddff010a115f8afcbc37df16cf146391b3f8053a5d0f23f2703908f33319c6838e3b1ca8a7ea70a5444d
+  data.tar.gz: 03f7261435bad5cc915908e9bfbe694082728e3613e5add4c2b36083fbc863668e2a9078ea303d0f2bcd545d35cc1aedc291d307edf78384b222c764d9fc0699

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

@@ -63,6 +63,51 @@
     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 {
@@ -720,7 +765,7 @@
     }
   }
 
-  // Row Pinning - additional inline styles in RegularTableView.tsx
+  // Row Pinning - React uses inline style; Rails passes same style via html_options from table_body
   .pinned-row {
     box-shadow: 0 4px 10px 0 rgba($shadow, 0.16) !important;
   }

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 }) %>
+      <%= 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 }) %>
     <% end %>
   <% end %>
 <% end %>

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

@@ -37,6 +37,8 @@ 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 = [

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

@@ -0,0 +1,57 @@
+<%# Example sort method for demonstration purposes %>
+<% if params["sort"] %>
+  <% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
+  <% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
+  <% @table_data_with_id.sort! do |a, b|
+    value_a = a[sort_param] || a[sort_param.to_sym]
+    value_b = b[sort_param] || b[sort_param.to_sym]
+
+    value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
+    value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
+
+    sort_direction * (value_a <=> value_b)
+  end %>
+<% end %>
+
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      sort_menu: [
+        { item: "Year", link: "?sort=year_asc#pinned_rows_table", active: params["sort"] == "year_asc", direction: "asc" },
+        { item: "Year", link: "?sort=year_desc#pinned_rows_table", active: params["sort"] == "year_desc", direction: "desc" }
+      ],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<% pinned_rows = { top: ["8"] } %>
+
+<%= pb_rails("advanced_table", props: { id: "pinned_rows_table", table_data: @table_data_with_id, column_definitions: column_definitions, max_height: "xs", pinned_rows: pinned_rows, responsive: "none", table_props: { sticky: true }}) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "pinned_rows_table", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "pinned_rows_table", table_data: @table_data_with_id, column_definitions: column_definitions, pinned_rows: pinned_rows }) %>
+<% end %>

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

@@ -0,0 +1,7 @@
+Use the `pinned_rows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and will not change position if sorting is used.
+
+**NOTE:**
+- Sticky header required: Pinned rows must be used with `sticky: true` via `table_props` (works with both responsive and non-responsive tables)
+- Row ids required: Each object within the `table_data` array must contain a unique `id` in order to attach an id to all Rows for this to function.
+- `pinned_rows` takes a hash with a `top` key containing an array of row ids, as shown in the code snippet below.
+- For expandable rows, use the parent id in `pinned_rows[:top]`; all its children will automatically be pinned with it. If a child id is passed without the parent being pinned, nothing will be pinned.

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

@@ -7,6 +7,7 @@ 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

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

@@ -196,6 +196,17 @@ 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"]');
@@ -315,9 +326,64 @@ 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";
@@ -519,3 +585,19 @@ 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();
+  }
+}

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

@@ -1,5 +1,22 @@
-<%= pb_content_tag(:tbody) do %>
-        <% object.table_data.each do |row| %>
-          <%= render_row_and_children(row, object.column_definitions, 0, false) %>
-        <% end %>
+<% table_data = object.table_data || [] %>
+<% if object.has_pinned_rows? %>
+  <%= pb_content_tag(:tbody, class: "pinned-rows-tbody") do %>
+    <% next_index = 0 %>
+    <% object.pinned_root_rows.each do |root_info| %>
+      <% row_output, next_index = object.render_row_and_children(root_info[:row], object.column_definitions, root_info[:depth], root_info[:depth] > 0, root_info[:ancestor_ids] || [], root_info[:ancestor_ids]&.first, immediate_parent_row_id: object.row_id_for(root_info[:parent_row]), is_pinned_row: true, pinned_index: next_index, initial_table_data_attributes: root_info[:depth].to_i > 0 ? object.pinned_root_initial_data_attributes(root_info) : nil) %>
+      <%= row_output %>
+    <% end %>
+  <% end %>
+  <%= pb_content_tag(:tbody) do %>
+    <% table_data.each do |row| %>
+      <% result = object.render_row_and_children(row, object.column_definitions, 0, false, skip_pinned_ids: object.pinned_ids_set) %>
+      <%= result.is_a?(Array) ? result[0] : result %>
+    <% end %>
+  <% end %>
+<% else %>
+  <%= pb_content_tag(:tbody) do %>
+    <% table_data.each do |row| %>
+      <%= object.render_row_and_children(row, object.column_definitions, 0, false) %>
+    <% end %>
+  <% end %>
 <% end %>

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

@@ -27,6 +27,8 @@ module Playbook
                          default: []
       prop :inline_row_loading, type: Playbook::Props::Boolean,
                                 default: false
+      prop :pinned_rows, type: Playbook::Props::HashProp,
+                         default: {}
 
       def flatten_columns(columns)
         columns.flat_map do |col|
@@ -42,14 +44,21 @@ 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: {}, immediate_parent_row_id: nil, is_pinned_row: false, pinned_index: nil, skip_pinned_ids: nil, initial_table_data_attributes: nil)
+        if skip_pinned_ids && row_id_for(row) && skip_pinned_ids.include?(row_id_for(row).to_s)
+          return is_pinned_row ? [ActiveSupport::SafeBuffer.new, pinned_index] : ActiveSupport::SafeBuffer.new
+        end
+
         top_parent_id ||= row.object_id
         new_ancestor_ids = ancestor_ids + [row.object_id]
-        leaf_columns = flatten_columns(column_definitions)
+        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_headers_arr = subrow_headers || []
+        is_first_child_of_subrow = current_depth.positive? && first_parent_child && subrow_headers_arr[current_depth - 1].present?
+        last_row = subrow_headers_arr.length == current_depth
+
+        next_pinned_index = pinned_index
 
         subrow_ancestor_ids = ancestor_ids + ["#{row.object_id}sr"]
         subrow_data_attributes = {
@@ -58,7 +67,16 @@ module Playbook
           row_parent: "#{table_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"
+        if is_first_child_of_subrow && enable_toggle_expansion == "all"
+          subrow_props = { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers_arr[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_pinned_row && next_pinned_index
+            subrow_props[:is_pinned_row] = true
+            subrow_props[:pinned_index] = next_pinned_index
+            subrow_props[:html_options] = { style: build_pinned_row_style(next_pinned_index, background: "var(--pb_table_sticky_bg, #f5f5f5)") }
+            next_pinned_index += 1
+          end
+          output << pb_rails("advanced_table/table_subrow_header", props: subrow_props)
+        end
 
         current_data_attributes = if current_depth.zero?
                                     {
@@ -67,11 +85,19 @@ module Playbook
                                       row_parent: nil,
                                     }
                                   else
-                                    table_data_attributes
+                                    initial_table_data_attributes || table_data_attributes
                                   end
 
         # Additional class and data attributes needed for toggle logic
-        output << pb_rails("advanced_table/table_row", props: { table_id: table_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, inline_row_loading: inline_row_loading })
+        row_props = { table_id: table_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, inline_row_loading: inline_row_loading }
+        if is_pinned_row && next_pinned_index
+          row_props[:is_pinned_row] = true
+          row_props[:pinned_index] = next_pinned_index
+          row_bg = (row_styling || []).find { |s| s[:row_id].to_s == row_id_for(row).to_s }&.[](:background_color) || "white"
+          row_props[:html_options] = { style: build_pinned_row_style(next_pinned_index, background: row_bg) }
+          next_pinned_index += 1
+        end
+        output << pb_rails("advanced_table/table_row", props: row_props)
 
         # Render inline loading row when inline_row_loading is enabled and row has empty children
         if inline_row_loading
@@ -103,11 +129,21 @@ 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])
+            child_opts = { additional_classes: "toggle-content", table_data_attributes: child_data_attributes, immediate_parent_row_id: row[:id] }
+            child_opts[:is_pinned_row] = is_pinned_row
+            child_opts[:pinned_index] = next_pinned_index if is_pinned_row
+            child_opts[:skip_pinned_ids] = skip_pinned_ids if skip_pinned_ids
+
+            child_output, next_pinned_index = render_row_and_children(child_row, column_definitions, current_depth + 1, is_first_child, new_ancestor_ids, top_parent_id, **child_opts)
+            output << child_output
           end
         end
 
-        output
+        if is_pinned_row
+          [output, next_pinned_index]
+        else
+          output
+        end
       end
 
       def classname
@@ -142,6 +178,76 @@ module Playbook
         end
       end
 
+      def row_id_for(row)
+        return nil if row.nil?
+
+        row[:id] || row["id"]
+      end
+
+      def pinned_top_ids
+        return [] if pinned_rows.nil? || !pinned_rows.respond_to?(:[])
+
+        top = pinned_rows["top"] || pinned_rows[:top]
+        Array(top).map(&:to_s)
+      end
+
+      def pinned_ids_set
+        return Set.new if pinned_top_ids.blank?
+
+        set = Set.new
+        pinned_root_rows.each do |root|
+          collect_row_and_descendant_ids(root[:row], set)
+        end
+        set
+      end
+
+      def collect_row_and_descendant_ids(row, set)
+        id = row_id_for(row)
+        set.add(id.to_s) if id
+        row_children_for(row)&.each { |child| collect_row_and_descendant_ids(child, set) }
+      end
+
+      def find_row_by_id(data, id, depth: 0, ancestor_ids: [], parent_row: nil)
+        id_str = id.to_s
+        Array(data).each do |row|
+          return { row: row, depth: depth, ancestor_ids: ancestor_ids, parent_row: parent_row } if row_id_for(row).to_s == id_str
+
+          found = find_row_by_id(row_children_for(row), id_str, depth: depth + 1, ancestor_ids: ancestor_ids + [row.object_id], parent_row: row)
+          return found if found
+        end
+        nil
+      end
+
+      def pinned_root_rows
+        return [] if pinned_top_ids.blank?
+
+        pinned_top_ids.filter_map { |id| find_row_by_id(table_data, id) }
+      end
+
+      def has_pinned_rows?
+        pinned_root_rows.any?
+      end
+
+      # Build inline style for sticky pinned row (matches React). Pass via html_options so the tr gets the attribute.
+      def build_pinned_row_style(pinned_index, background: "white")
+        header_offset = "var(--advanced-table-header-height, 44px)"
+        row_offset = "calc(2.5em * #{pinned_index})"
+        "position: sticky; top: calc(#{header_offset} + #{row_offset}); z-index: 3; background: #{background};"
+      end
+
+      def pinned_root_initial_data_attributes(root_info)
+        return {} if root_info[:depth].to_i.zero?
+
+        anc = root_info[:ancestor_ids] || []
+        content = (anc + [root_info[:row].object_id]).join("-")
+        {
+          top_parent: "#{table_id}_#{anc.first}",
+          row_depth: root_info[:depth],
+          row_parent: "#{table_id}_#{anc.last}",
+          advanced_table_content: content,
+        }
+      end
+
       def cell_accessors_length(col_defs)
         first_col = col_defs.first
         return 0 unless first_col

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

@@ -3,9 +3,11 @@
   button_color = row_style&.[](:expand_button_color)
   bg_color = row_style&.[](:background_color)
   font_color = row_style&.[](:font_color)
+  tr_options = (object.html_options || {}).stringify_keys
+  tr_options["class"] = [tr_options["class"], object.classname].reject(&:blank?).join(" ")
 %>
 
-<%= pb_content_tag(:tr) do %>
+<%= pb_content_tag(:tr, tr_options) do %>
     <% has_separate_checkbox = object.selectable_rows && object.enable_toggle_expansion == "none" %>
     <% if has_separate_checkbox %>
         <%= object.render_checkbox_cell %>

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

@@ -35,13 +35,24 @@ module Playbook
                                      default: ""
       prop :inline_row_loading, type: Playbook::Props::Boolean,
                                 default: false
+      prop :is_pinned_row, type: Playbook::Props::Boolean,
+                           default: false
+      prop :pinned_index, type: Playbook::Props::Numeric,
+                          default: nil
+      prop :html_options, type: Playbook::Props::HashProp,
+                          default: {}
+      prop :classname, type: Playbook::Props::String,
+                       default: ""
 
       def data
         Hash(prop(:data)).merge(table_data_attributes)
       end
 
       def classname
-        generate_classname("pb_table_tr", "pb-bg-row-white", subrow_depth_classname, separator: " ")
+        classes = ["pb_table_tr", "pb-bg-row-white", subrow_depth_classname]
+        classes << "pinned-row" if is_pinned_row
+        classes.reject!(&:blank?)
+        generate_classname(*classes, separator: " ")
       end
 
       def td_classname(column, index)

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

@@ -1,4 +1,7 @@
-<%= pb_content_tag(:tr) do %>
+<% tr_options = (object.html_options || {}).stringify_keys %>
+<% tr_options["class"] = [tr_options["class"], object.classname].reject(&:blank?).join(" ") %>
+
+<%= pb_content_tag(:tr, tr_options) do %>
         <% object.column_definitions.each_with_index do |column, index| %>
             <%= pb_rails("table/table_cell", props: { classname: object.td_classname(index) }) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: "start" }) do %>

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

@@ -19,13 +19,21 @@ module Playbook
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "scroll"
+      prop :is_pinned_row, type: Playbook::Props::Boolean,
+                           default: false
+      prop :pinned_index, type: Playbook::Props::Numeric,
+                          default: nil
+      prop :html_options, type: Playbook::Props::HashProp,
+                          default: {}
 
       def data
         Hash(prop(:data)).merge(subrow_data_attributes)
       end
 
       def classname
-        generate_classname("pb_table_tr", "bg-silver", "pb_subrow_header", subrow_depth_classname, separator: " ")
+        classes = ["pb_table_tr", "bg-silver", "pb_subrow_header", subrow_depth_classname]
+        classes << "pinned-row" if is_pinned_row
+        generate_classname(*classes, separator: " ")
       end
 
       def td_classname(index)