playbook_ui 14.10.0.pre.alpha.play1662cssbargraph5214 → 14.10.0.pre.alpha.play16825244

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fe47ff4f6f8066eefe41139b5c0bc8a3a249a4862daf2a573f203d407b0abedb
-  data.tar.gz: 251e3caa684d8657a58bd66e9aaa363f8f135ae80fc746ec9f9c54bbb06654e6
+  metadata.gz: 0dfffe1c453fa61d9befe70785310c0af3d7ae73b4e11df5c60327a383669dea
+  data.tar.gz: 4860df612192c0483c35c129aacfb38e8dedafd7b789d0b4c1c567ba04e70250
 SHA512:
-  metadata.gz: bcceed9a15c145e0787a23da6ab6d5fcfc9c97244b90a7cefc711b73120f249eaa064b9512c9090bdab8326acab85da444f48e49ced76aacd6289fd56aa7b188
-  data.tar.gz: 8a7d1df92bc0dfc9ec8f4e3beee707f17e6da9eb145c3146fbb790af83e4c7eed0bca782eb911c829e3888915fe713e7c76a7658ae6951944616382268356d53
+  metadata.gz: e8d307c69d04191dfd48f551e406c318499f7838c19c3c6046caa2036c7b66316ea32d8cb5000080b3dd32ddf1dc546314d3e62af1e1169b9dfe33d6368b1b1f
+  data.tar.gz: 70caf6d01823765ae863db4cb6ffe1b4941f8cadd58cc0edebf286520bdb8bf334157c88729bd8d9e83adba8ebfcd7bcf561dbfdd548dc88f533fc9a63b5f909

data/app/pb_kits/playbook/_playbook.scss

@@ -128,3 +128,4 @@
 @import 'utilities/truncate';
 @import 'utilities/vertical_align';
 @import 'utilities/height';
+@import 'utilities/gap';

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

@@ -36,35 +36,29 @@
       .last-header-cell {
         border-right: 1px solid $border_light !important;
       }
-    
       th {
         border-radius: 0px !important;
         border-width: 0 0 1px 0 !important;
       }
       th:first-child {
         border-left-width: 1px !important;
-        @media only screen and (max-width: $screen-xl-min) {
-          border-left-width: 0 !important;
-        }
-      }
-      th:last-child {
-        border-right-width: 1px !important;
-        @media only screen and (max-width: $screen-xl-min) {
-          border-right-width: 0 !important;
-        }
       }
     }
     th[colspan]:not([colspan="1"]) {
-      border-right: 1px solid $border_light;
+      border-right: 1px solid $border_light !important;
     }
-
-  
   }
 
   .pb_advanced_table_body {
     .last-cell {
       border-right: 1px solid $border_light !important;
     }
+    tr td:first-child {
+      padding-left: 8px !important;
+    }
+    tr .pb_table_td:last-child {
+      padding-right: 8px !important;
+    }
   }
 
 
@@ -134,7 +128,7 @@
   }
 
   .toggle-content {
-    display: none;
+    display: none !important;
     height: 0;
     padding-bottom: 0 !important;
     padding-top: 0 !important;
@@ -143,7 +137,7 @@
   }
 
   .toggle-content.is-visible {
-    display: contents;
+    display: table-row !important;
     height: auto;
   }
 
@@ -166,7 +160,7 @@
       width: 100%;
       [class^=pb_table].table-sm.table-card thead tr th:first-child,
       [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
-        border-left-width: 0px;
+        border-left-width: 0px !important;
       }
       [class^=pb_table].table-sm.table-card thead tr th:last-child,
       [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
@@ -192,6 +186,7 @@
       .bg-white td:first-child {
           background-color: $white;
       }
+      
     }
   }
   @media only screen and (min-width: $screen-xl-min) {

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

@@ -1,5 +1,5 @@
 <%= pb_content_tag do %>
-        <%= pb_rails("table", props: { size: "sm", tag:"div", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark }) do %>
+        <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark }) do %>
           <% if content.present? %>
             <% content.presence %>
           <% else %>

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

@@ -10,9 +10,16 @@ module Playbook
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
                                      values: %w[all header none],
                                      default: "header"
+      prop :responsive, type: Playbook::Props::Enum,
+                        values: %w[none scroll],
+                        default: "none"
 
       def classname
-        generate_classname("pb_advanced_table")
+        generate_classname("pb_advanced_table", responsive_classname, separator: " ")
+      end
+
+      def responsive_classname
+        responsive == "scroll" ? "advanced-table-responsive-scroll" : "advanced-table-responsive-none"
       end
     end
   end

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

@@ -49,11 +49,9 @@
       label: "Graduated Students",
     }
   ]
-
-  subrow_headers = ["Quarter", "Month", "Day"]
 %>
 
 <%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
   <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
 <% end %>

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

@@ -0,0 +1,43 @@
+<% column_definitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        accessor: "newEnrollments",
+        label: "New Enrollments",
+      },
+      {
+        accessor: "scheduledMeetings",
+        label: "Scheduled Meetings",
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        accessor: "attendanceRate",
+        label: "Attendance Rate",
+      },
+      {
+        accessor: "completedClasses",
+        label: "Completed Classes",
+      },
+      {
+        accessor: "classCompletionRate",
+        label: "Class Completion Rate",
+      },
+      {
+        accessor: "graduatedStudents",
+        label: "Graduated Students",
+      },
+    ],
+  },
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "beta_table_with_headers", table_data: @table_data, column_definitions: column_definitions }) %>

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

@@ -0,0 +1,58 @@
+<% column_definitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        label: "Enrollment Stats",
+        columns: [
+          {
+            accessor: "newEnrollments",
+            label: "New Enrollments",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        label: "Completion Metrics",
+        columns: [
+          {
+            accessor: "completedClasses",
+            label: "Completed Classes",
+          },
+          {
+            accessor: "classCompletionRate",
+            label: "Class Completion Rate",
+          },
+        ],
+      },
+      {
+        label: "Attendance",
+        columns: [
+          {
+            accessor: "attendanceRate",
+            label: "Attendance Rate",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions }) %>

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

@@ -1,10 +1,13 @@
 examples:
   rails:
   - advanced_table_beta: Default (Required Props)
-  - advanced_table_beta_subrow_headers: SubRow Headers
+  # - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_custom_cell_rails: Custom Components for Cells
+  - advanced_table_column_headers: Multi-Header Columns
+  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
+
 
   react:
   - advanced_table_default: Default (Required Props)

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

@@ -1,138 +1,186 @@
-import PbEnhancedElement from '../pb_enhanced_element'
+import PbEnhancedElement from "../pb_enhanced_element";
 
-const ADVANCED_TABLE_SELECTOR = '[data-advanced-table]'
-const CONTENT_SELECTOR = '[data-advanced-table-content="id"]'
-const DOWN_ARROW_SELECTOR = '#advanced-table_open_icon'
-const UP_ARROW_SELECTOR = '#advanced-table_close_icon'
+const ADVANCED_TABLE_SELECTOR = "[data-advanced-table]";
+const DOWN_ARROW_SELECTOR = "#advanced-table_open_icon";
+const UP_ARROW_SELECTOR = "#advanced-table_close_icon";
 
 export default class PbAdvancedTable extends PbEnhancedElement {
   static get selector() {
-    return ADVANCED_TABLE_SELECTOR
+    return ADVANCED_TABLE_SELECTOR;
   }
 
   get target() {
-    return document.querySelector(CONTENT_SELECTOR.replace("id", this.element.id))
+    const table = this.element.closest("table");
+    return table.querySelectorAll(`[data-row-parent="${this.element.id}"]`);
   }
-  
-  static expandedRows = new Set()
-  static isCollapsing = false
+
+  static expandedRows = new Set();
+  static isCollapsing = false;
 
   connect() {
-    this.element.addEventListener('click', () => {
+    this.element.addEventListener("click", () => {
       if (!PbAdvancedTable.isCollapsing) {
-        const isExpanded = this.element.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
+        const isExpanded =
+          this.element.querySelector(UP_ARROW_SELECTOR).style.display ===
+          "inline-block";
         if (!isExpanded) {
-          PbAdvancedTable.expandedRows.add(this.element.id)
+          PbAdvancedTable.expandedRows.add(this.element.id);
         } else {
-          PbAdvancedTable.expandedRows.delete(this.element.id)
+          PbAdvancedTable.expandedRows.delete(this.element.id);
         }
+        this.toggleElement(this.target);
       }
-      this.toggleElement(this.target)
-    })
+    });
+
+    const nestedButtons = this.element
+      .closest("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);
+        }
+      });
+    });
   }
 
-  showElement(elem) {
-    const getHeight = () => {
-      elem.style.display = 'block'
-      const height = elem.scrollHeight + 'px'
-      elem.style.display = ''
-      return height
-    }
+  showElement(elements) {
+    elements.forEach((elem) => {
+      elem.style.display = "table-row";
+      elem.classList.add("is-visible");
+      const childRowsAll = this.element
+        .closest("table")
+        .querySelectorAll(
+          `[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`
+        );
+
+      childRowsAll.forEach((childRow) => {
+        const dataContent = childRow.dataset.advancedTableContent;
+
+        if (!dataContent) {
+          return;
+        }
 
-    const height = getHeight()
-    elem.classList.add('is-visible')
-    elem.style.height = height
-    elem.style.overflow = "hidden"
+        // Split the dataContent to get all ancestor IDs, check against simpleExpandedRows
+        const ancestorIds = dataContent.split("-").slice(0, -1);
 
-    window.setTimeout(() => {
-      elem.style.height = ''
-      elem.style.overflow = "visible"
-    }, 250)
+        const prefixedAncestorIds = ancestorIds.map(
+          (id) => `${childRow.id}_${id}`
+        );
+        const allAncestorsExpanded = prefixedAncestorIds.every((id) =>
+          PbAdvancedTable.expandedRows.has(id)
+        );
+
+        if (allAncestorsExpanded) {
+          childRow.style.display = "table-row";
+          childRow.classList.add("is-visible");
+        } else {
+          childRow.style.display = "none";
+          childRow.classList.remove("is-visible");
+        }
+      });
+    });
   }
 
-  hideElement(elem) {
-    elem.style.height = elem.scrollHeight + 'px'
+  hideElement(elements) {
+    elements.forEach((elem) => {
+      elem.style.display = "none";
+      elem.classList.remove("is-visible");
 
-    window.setTimeout(() => {
-      elem.style.height = '0'
-      elem.style.paddingTop = '0'
-      elem.style.paddingBottom = '0'
-      elem.style.overflow = "hidden"
-    }, 1)
+      // Remove the row ID from expandedRows when this row is hidden
+      if (PbAdvancedTable.expandedRows.has(elem.id)) {
+        PbAdvancedTable.expandedRows.delete(elem.id);
+      }
 
-    window.setTimeout(() => {
-      elem.classList.remove('is-visible')
-      elem.style.overflow = ""
-    }, 200)
+      const childrenArray = elem.dataset.advancedTableContent.split("-");
+      const currentDepth = parseInt(elem.dataset.rowDepth);
+      if (childrenArray.length > currentDepth) {
+        // Find the child rows corresponding to this parent row
+        const childRows = this.element
+          .closest("table")
+          .querySelectorAll(
+            `[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`
+          );
+
+        childRows.forEach((childRow) => {
+          childRow.style.display = "none";
+          childRow.classList.remove("is-visible");
+        });
+      }
+    });
   }
 
-  toggleElement(elem) {
-    if (elem.classList.contains('is-visible')) {
-      this.hideElement(elem)
-      this.displayDownArrow()
-      return
-    }
+  toggleElement(elements) {
+    if (!elements.length) return;
 
-    this.showElement(elem)
-    this.displayUpArrow()
+    const isVisible = elements[0].classList.contains("is-visible");
+    if (isVisible) {
+      this.hideElement(elements);
+      this.displayDownArrow();
+    } else {
+      this.showElement(elements);
+      this.displayUpArrow();
+    }
   }
 
   displayDownArrow() {
-    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'inline-block'
-    this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'none'
+    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display =
+      "inline-block";
+    this.element.querySelector(UP_ARROW_SELECTOR).style.display = "none";
   }
 
   displayUpArrow() {
-    this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
-    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
+    this.element.querySelector(UP_ARROW_SELECTOR).style.display =
+      "inline-block";
+    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = "none";
   }
 
   static handleToggleAllHeaders(element) {
-    const table = element.closest('.pb_table')
-    const firstLevelButtons = table.querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]')
-    
-    const expandedRows = Array.from(firstLevelButtons).filter(button => 
-      button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
-    )
-  
-    if (expandedRows.length === firstLevelButtons.length) {
-      expandedRows.forEach(button => {
-        button.click()
-      })
-      this.expandedRows.clear()
+    const table = element.closest(".pb_table");
+    const firstLevelButtons = table.querySelectorAll(
+      ".pb_advanced_table_body > .pb_table_tr [data-advanced-table]"
+    );
+
+    const allExpanded = Array.from(firstLevelButtons).every(
+      (button) =>
+        button.querySelector(UP_ARROW_SELECTOR).style.display === "inline-block"
+    );
+
+    if (allExpanded) {
+      firstLevelButtons.forEach((button) => {
+        button.click();
+        PbAdvancedTable.expandedRows.delete(button.id);
+      });
     } else {
-      firstLevelButtons.forEach(button => {
-        if (!this.expandedRows.has(button.id)) {
-          button.click()
+      firstLevelButtons.forEach((button) => {
+        if (!PbAdvancedTable.expandedRows.has(button.id)) {
+          button.click();
+          PbAdvancedTable.expandedRows.add(button.id);
         }
-      })
-    }
-  }
-  static handleToggleAllSubRows(element, rowDepth) {
-    const parentElement = element.closest(".toggle-content")
-    const subrowButtons = parentElement.querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]')
-    
-    const expandedSubRows = Array.from(subrowButtons).filter(button => 
-      button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
-    )
-  
-    if (expandedSubRows.length === subrowButtons.length) {
-      expandedSubRows.forEach(button => {
-        button.click()
-      })
-    } else {
-      subrowButtons.forEach(button => {
-        if (!this.expandedRows.has(button.id)) {
-          button.click()
+      });
+
+      PbAdvancedTable.expandedRows.forEach((rowId) => {
+        const nestedButton = table.querySelector(
+          `[data-advanced-table][id="${rowId}"]`
+        );
+        if (nestedButton && !firstLevelButtons.contains(nestedButton)) {
+          nestedButton.click();
         }
-      })
+      });
     }
   }
+
+  // static handleToggleAllSubRows(element, rowDepth) {}
 }
 
 window.expandAllRows = (element) => {
-  PbAdvancedTable.handleToggleAllHeaders(element)
-}
-window.expandAllSubRows = (element, rowDepth) => {
-  PbAdvancedTable.handleToggleAllSubRows(element, rowDepth)
-}
+  PbAdvancedTable.handleToggleAllHeaders(element);
+};
+// window.expandAllSubRows = (element, rowDepth) => {
+//   PbAdvancedTable.handleToggleAllSubRows(element, rowDepth);
+// };

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

@@ -1,4 +1,4 @@
-<%= pb_content_tag do %>
+<%= pb_content_tag(:tbody) do %>
         <% object.table_data.each do |row| %>
           <%= render_row_and_children(row, object.column_definitions, 0, false) %>
         <% end %>

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

@@ -17,27 +17,69 @@ module Playbook
       prop :collapsible_trail, type: Playbook::Props::Boolean,
                                default: true
 
-      def render_row_and_children(row, column_definitions, current_depth, first_parent_child)
+      def flatten_columns(columns)
+        columns.flat_map do |col|
+          if col[:columns]
+            flatten_columns(col[:columns])
+          elsif col[:accessor].present?
+            if has_grouped_headers?
+              col.merge(is_last_in_group: last_in_group?(columns, col))
+            else
+              col
+            end
+          end
+        end.compact
+      end
+
+      def render_row_and_children(row, column_definitions, current_depth, first_parent_child, ancestor_ids = [], top_parent_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?
 
         output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: column_definitions, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
 
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: column_definitions, depth: current_depth, collapsible_trail: collapsible_trail })
+        # Pass only leaf_columns to table_row to account for multiple nested columns
+        output << pb_rails("advanced_table/table_row", props: {
+                             id: id,
+                             row: row,
+                             column_definitions: leaf_columns,
+                             depth: current_depth,
+                             collapsible_trail: collapsible_trail,
+                           })
 
         if row[:children].present?
-          output << content_tag(:div, class: "toggle-content", data: { advanced_table_content: row.object_id.to_s + id }) do
-            row[:children].map do |child_row|
-              render_row_and_children(child_row, column_definitions, current_depth + 1, row.children.first == child_row)
-            end.join.html_safe
-          end
+          output << row[:children].map do |child_row|
+            is_first_child = row[:children].first == child_row
+
+            child_output = render_row_and_children(child_row, column_definitions, current_depth + 1, is_first_child, new_ancestor_ids, top_parent_id)
+
+            immediate_parent_id = row.object_id
+            top_parent = top_parent_id
+            # Combine ancestor_ids to build the content id
+            data_content = new_ancestor_ids.join("-") + "-#{child_row.object_id}"
+
+            child_output.to_str.sub("<tr", %(<tr class="toggle-content" data-top-parent="#{id}_#{top_parent}" data-row-depth="#{current_depth}" data-row-parent="#{id}_#{immediate_parent_id}" data-advanced-table-content="#{data_content}"))
+          end.join.html_safe
         end
 
         output
       end
 
       def classname
-        generate_classname("pb_advanced_table_body", "pb_table_tbody", separator: " ")
+        generate_classname("pb_advanced_table_body", separator: " ")
+      end
+
+    private
+
+      def has_grouped_headers?
+        column_definitions.any? { |col| col.key?(:columns) }
+      end
+
+      def last_in_group?(columns, current_col)
+        columns.last[:accessor] == current_col[:accessor]
       end
     end
   end

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

@@ -1,18 +1,21 @@
-<%= pb_content_tag do %>
-        <%= pb_rails("table/table_row", props: { tag: "div" }) do %>
-            <% object.column_definitions.each_with_index do |item, index| %>
-                <%= pb_rails("table/table_header", props: { tag: "div", id: item[:accessor], classname: object.th_classname, sort_menu: item[:sort_menu] }) do %>
-                    <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", text_align: "end" }) do %>
-                        <% if index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") %>
-                            <button
-                              class="gray-icon toggle-all-icon"
-                              onclick="expandAllRows(this); event.preventDefault();">
-                              <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
-                            </button>
-                        <% end %>
-                        <%= item[:label] %>
+<%= pb_content_tag(:thead) do %>
+  <% object.header_rows.each_with_index do |header_row, row_index| %>
+    <%= pb_rails("table/table_row") do %>
+      <% header_row.each_with_index do |cell, cell_index| %>
+        <% header_id = cell[:accessor].present? ? cell[:accessor] : "header_#{row_index}_#{cell_index}" %>
+        <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname, ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
+                <%= pb_rails("flex", props:{ align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
+                    <% if cell_index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") && row_index === header_rows.size - 1 %>
+                        <button
+                            class="gray-icon toggle-all-icon"
+                            onclick="expandAllRows(this); event.preventDefault();">
+                            <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
+                        </button>
                     <% end %>
+                    <%= cell[:label] %>
                 <% end %>
-            <% end %>
         <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
 <% end %>