playbook_ui 16.4.0 → 16.5.0.pre.alpha.RTEPOC15682

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
@@ -74,6 +75,7 @@ examples:
   - advanced_table_column_visibility_with_state: Column Visibility Control With State
   - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
   - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
+  - advanced_table_grouped_headers_composition: Grouped headers, custom headers, sort, and pinned rows
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
   - advanced_table_row_styling: Row Styling
   - advanced_table_padding_control_per_row: Padding Control using Row Styling

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

@@ -42,6 +42,7 @@ export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinit
 export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'
 export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'
 export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced_table_with_custom_header_multi_header.jsx'
+export { default as AdvancedTableGroupedHeadersComposition } from './_advanced_table_grouped_headers_composition.jsx'
 export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
 export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'
 export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'

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/kit.schema.json

@@ -0,0 +1,278 @@
+{
+  "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
+  "name": "AdvancedTable",
+  "description": "AdvancedTable component",
+  "platforms": [
+    "react",
+    "rails"
+  ],
+  "props": {
+    "actions": {
+      "type": "React.ReactNode[] | React.ReactNode",
+      "platforms": [
+        "react",
+        "rails"
+      ]
+    },
+    "cascadeCollapse": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ]
+    },
+    "columnDefinitions": {
+      "type": "array",
+      "platforms": [
+        "react",
+        "rails"
+      ]
+    },
+    "columnGroupBorderColor": {
+      "type": "enum",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "values": [
+        "text_lt_default",
+        "text_lt_light",
+        "text_lt_lighter",
+        "text_dk_default",
+        "text_dk_light",
+        "text_dk_lighter"
+      ],
+      "default": "none"
+    },
+    "columnVisibilityControl": {
+      "type": "GenericObject",
+      "platforms": [
+        "react"
+      ]
+    },
+    "customSort": {
+      "type": "boolean;",
+      "platforms": [
+        "react"
+      ]
+    },
+    "enableToggleExpansion": {
+      "type": "enum",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "values": [
+        "all",
+        "header",
+        "none"
+      ],
+      "default": "header"
+    },
+    "enableSortingRemoval": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ]
+    },
+    "expandedControl": {
+      "type": "GenericObject",
+      "platforms": [
+        "react"
+      ]
+    },
+    "expandByDepth": {
+      "type": "{ [key: string]: string | number }",
+      "platforms": [
+        "react"
+      ]
+    },
+    "onExpandByDepthClick": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    },
+    "initialLoadingRowsCount": {
+      "type": "number",
+      "platforms": [
+        "react"
+      ]
+    },
+    "inlineRowLoading": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": false
+    },
+    "loading": {
+      "type": "boolean | string",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": false
+    },
+    "onRowToggleClick": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    },
+    "onToggleExpansionClick": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    },
+    "pagination": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ]
+    },
+    "paginationProps": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    },
+    "responsive": {
+      "type": "enum",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "values": [
+        "scroll",
+        "none"
+      ],
+      "default": "scroll"
+    },
+    "rowStyling": {
+      "type": "array",
+      "platforms": [
+        "react",
+        "rails"
+      ]
+    },
+    "scrollBarNone": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": false
+    },
+    "selectableRows": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": false
+    },
+    "showActionsBar": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": true
+    },
+    "persistToggleExpansionButton": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": false
+    },
+    "sortControl": {
+      "type": "GenericObject",
+      "platforms": [
+        "react"
+      ]
+    },
+    "sortParentOnly": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ]
+    },
+    "tableData": {
+      "type": "array",
+      "platforms": [
+        "react",
+        "rails"
+      ]
+    },
+    "tableOptions": {
+      "type": "GenericObject",
+      "platforms": [
+        "react"
+      ]
+    },
+    "tableProps": {
+      "type": "GenericObject",
+      "platforms": [
+        "react",
+        "rails"
+      ]
+    },
+    "toggleExpansionIcon": {
+      "type": "string | string[]",
+      "platforms": [
+        "react"
+      ]
+    },
+    "onRowSelectionChange": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    },
+    "onCustomSortClick": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    },
+    "virtualizedRows": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ]
+    },
+    "allowFullScreen": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ]
+    },
+    "fullScreenControl": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    },
+    "pinnedRows": {
+      "platforms": [
+        "rails"
+      ],
+      "type": "string"
+    }
+  },
+  "globalProps": true,
+  "usage": {
+    "react": {
+      "import": "import { AdvancedTable } from 'playbook-ui'",
+      "example": "<AdvancedTable columnGroupBorderColor=\"text_lt_default\" enableToggleExpansion=\"all\"></AdvancedTable>"
+    },
+    "rails": {
+      "import": null,
+      "example": "<%= pb_rails(\"advanced_table\", props: { column_group_border_color: \"text_lt_default\", enable_toggle_expansion: \"all\" }) %>"
+    }
+  }
+}

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

@@ -1,3 +1,9 @@
+// Acts as outer “card frame” on the advanced-table wrapper (table-card from Table) is included from `_advanced_table.scss` only when `:not(.advanced-table-no-table-container)`/container: false is not present.
+@mixin advanced-table-sticky-wrapper-frame($border-color) {
+  border-radius: 4px;
+  box-shadow: 1px 0 0 0px $border-color, -1px 0 0 0px $border-color;
+}
+
 @mixin advanced-table-sticky-mixin(
   $border-color,
   $bg-main,
@@ -5,8 +11,6 @@
   $highlight: #E5EEFA,
   $highlight-dark: #202850,
 ) {
-  border-radius: 4px;
-  box-shadow: 1px 0 0 0px $border-color, -1px 0 0 0px $border-color;
   display: block;
   [class^="pb_table"].table-sm.table-card thead tr th:first-child,
   [class^="pb_table"].table-sm:not(.no-hover).table-card

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_header.html.erb

@@ -7,7 +7,7 @@
       <% header_row.each_with_index do |cell, cell_index| %>
         <% header_component = object.header_component_info(cell, cell_index, row_index) %>
         <%= pb_rails(header_component[:name], props: header_component[:props]) do %>
-          <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: (cell[:header_alignment] || "end") }) do %>
+          <%= pb_rails("flex", props: { align: "center", justify: object.header_flex_justify(cell, cell_index, row_index), text_align: object.header_flex_text_align(cell) }) do %>
             <% if cell_index.zero? && row_index === header_rows.size - 1 %>
               <% if object.selectable_rows && object.enable_toggle_expansion != "none" %>
                 <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>

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

@@ -192,6 +192,19 @@ module Playbook
         { name: component_name, props: component_props }
       end
 
+      # Flex justify for header cells: column_styling header_alignment when present (otherwisedefault by column/row index)
+      def header_flex_justify(cell, cell_index, row_index)
+        ha = cell[:header_alignment]
+        return header_alignment_to_justify(ha) if ha.present?
+
+        default_header_flex_justify(cell_index, row_index)
+      end
+
+      # Flex text_align from column_styling header_alignment (default is end)
+      def header_flex_text_align(cell)
+        (cell[:header_alignment].presence || "end").to_s
+      end
+
     private
 
       # Find the original column definition for a cell
@@ -351,6 +364,26 @@ module Playbook
           row[:children] || row["children"]
         end
       end
+
+      # 2 header alignment helper methods
+      def header_alignment_to_justify(header_alignment)
+        case header_alignment.to_s
+        when "left" then "start"
+        when "center" then "center"
+        when "right" then "end"
+        else "end"
+        end
+      end
+
+      def default_header_flex_justify(cell_index, row_index)
+        if cell_index.zero?
+          "start"
+        elsif row_index == header_rows.size - 1
+          "end"
+        else
+          "center"
+        end
+      end
     end
   end
 end