playbook_ui 14.10.0.pre.alpha.play1465attempt25272 → 14.10.0.pre.alpha.play1662cssbargraph5193

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c93b9ff47768d50c0d18d31f265545696ab20026a354c4ce1902bf708a97e276
-  data.tar.gz: ec50794f12461ba77cca8a805a20512ee641c0dc5c74168240ad79f071b87958
+  metadata.gz: f2e1aaf2cadccd158fb55ca05342e3dfefd6e2614dc37d220086b342e5df4340
+  data.tar.gz: fc03a93a9cc11765508190229426d34d507306ebf46aff0efe5ec23bb65ddb32
 SHA512:
-  metadata.gz: 676259bf2c4b7eadd6ca71fad89f4182a2a4a297e3531d0390681353605ca5a07367114596288292d42c48ad0d45bc051c68fc3ade51fe22e8924c24b226ca48
-  data.tar.gz: 0c40167b772c7e4125ef170e13bce0426751a658c8e987bce7fa1a89d0ddd7045f7848565560fe95f9c09c0347a5af19ab5f79d28a99e95078feee1fd1106e32
+  metadata.gz: 88632df2e8dd9a501cd6d97a0bc60213d11a1a4f3e3b063c9318a83267177403c02adb69e60c69344c07c91e7a1915f8a3954069c8682839d8787879b3208219
+  data.tar.gz: 03f3eec3ebd3da933b162a985c72fde36109c4f2e01ad4d732f73cf27a1eae8fb633823af6859f659470d0dca062b8f1dba1777e172a05be30af19b19cc063a4

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

@@ -36,29 +36,35 @@
       .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 !important;
+      border-right: 1px solid $border_light;
     }
+
+  
   }
 
   .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;
-    }
   }
 
 
@@ -128,7 +134,7 @@
   }
 
   .toggle-content {
-    display: none !important;
+    display: none;
     height: 0;
     padding-bottom: 0 !important;
     padding-top: 0 !important;
@@ -137,7 +143,7 @@
   }
 
   .toggle-content.is-visible {
-    display: table-row !important;
+    display: contents;
     height: auto;
   }
 
@@ -160,7 +166,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 !important;
+        border-left-width: 0px;
       }
       [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 {
@@ -186,7 +192,6 @@
       .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", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark }) do %>
+        <%= pb_rails("table", props: { size: "sm", tag:"div", 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,16 +10,9 @@ 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", responsive_classname, separator: " ")
-      end
-
-      def responsive_classname
-        responsive == "scroll" ? "advanced-table-responsive-scroll" : "advanced-table-responsive-none"
+        generate_classname("pb_advanced_table")
       end
     end
   end

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

@@ -49,9 +49,11 @@
       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, enable_toggle_expansion: "all" }) %>
+  <%= 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" }) %>
 <% end %>

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

@@ -1,13 +1,10 @@
 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,186 +1,138 @@
-import PbEnhancedElement from "../pb_enhanced_element";
+import PbEnhancedElement from '../pb_enhanced_element'
 
-const ADVANCED_TABLE_SELECTOR = "[data-advanced-table]";
-const DOWN_ARROW_SELECTOR = "#advanced-table_open_icon";
-const UP_ARROW_SELECTOR = "#advanced-table_close_icon";
+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'
 
 export default class PbAdvancedTable extends PbEnhancedElement {
   static get selector() {
-    return ADVANCED_TABLE_SELECTOR;
+    return ADVANCED_TABLE_SELECTOR
   }
 
   get target() {
-    const table = this.element.closest("table");
-    return table.querySelectorAll(`[data-row-parent="${this.element.id}"]`);
+    return document.querySelector(CONTENT_SELECTOR.replace("id", 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);
       }
-    });
-
-    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);
-        }
-      });
-    });
+      this.toggleElement(this.target)
+    })
   }
 
-  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;
-        }
-
-        // Split the dataContent to get all ancestor IDs, check against simpleExpandedRows
-        const ancestorIds = dataContent.split("-").slice(0, -1);
+  showElement(elem) {
+    const getHeight = () => {
+      elem.style.display = 'block'
+      const height = elem.scrollHeight + 'px'
+      elem.style.display = ''
+      return height
+    }
 
-        const prefixedAncestorIds = ancestorIds.map(
-          (id) => `${childRow.id}_${id}`
-        );
-        const allAncestorsExpanded = prefixedAncestorIds.every((id) =>
-          PbAdvancedTable.expandedRows.has(id)
-        );
+    const height = getHeight()
+    elem.classList.add('is-visible')
+    elem.style.height = height
+    elem.style.overflow = "hidden"
 
-        if (allAncestorsExpanded) {
-          childRow.style.display = "table-row";
-          childRow.classList.add("is-visible");
-        } else {
-          childRow.style.display = "none";
-          childRow.classList.remove("is-visible");
-        }
-      });
-    });
+    window.setTimeout(() => {
+      elem.style.height = ''
+      elem.style.overflow = "visible"
+    }, 250)
   }
 
-  hideElement(elements) {
-    elements.forEach((elem) => {
-      elem.style.display = "none";
-      elem.classList.remove("is-visible");
+  hideElement(elem) {
+    elem.style.height = elem.scrollHeight + 'px'
 
-      // 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.style.height = '0'
+      elem.style.paddingTop = '0'
+      elem.style.paddingBottom = '0'
+      elem.style.overflow = "hidden"
+    }, 1)
 
-      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");
-        });
-      }
-    });
+    window.setTimeout(() => {
+      elem.classList.remove('is-visible')
+      elem.style.overflow = ""
+    }, 200)
   }
 
-  toggleElement(elements) {
-    if (!elements.length) return;
-
-    const isVisible = elements[0].classList.contains("is-visible");
-    if (isVisible) {
-      this.hideElement(elements);
-      this.displayDownArrow();
-    } else {
-      this.showElement(elements);
-      this.displayUpArrow();
+  toggleElement(elem) {
+    if (elem.classList.contains('is-visible')) {
+      this.hideElement(elem)
+      this.displayDownArrow()
+      return
     }
+
+    this.showElement(elem)
+    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 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);
-      });
+    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()
     } else {
-      firstLevelButtons.forEach((button) => {
-        if (!PbAdvancedTable.expandedRows.has(button.id)) {
-          button.click();
-          PbAdvancedTable.expandedRows.add(button.id);
+      firstLevelButtons.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) {
+    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()
         }
-      });
+      })
     }
   }
-
-  // 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(:tbody) do %>
+<%= pb_content_tag 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,69 +17,27 @@ module Playbook
       prop :collapsible_trail, type: Playbook::Props::Boolean,
                                default: true
 
-      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)
-
+      def render_row_and_children(row, column_definitions, current_depth, first_parent_child)
         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"
 
-        # 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,
-                           })
+        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: column_definitions, depth: current_depth, collapsible_trail: collapsible_trail })
 
         if row[:children].present?
-          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
+          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
         end
 
         output
       end
 
       def classname
-        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]
+        generate_classname("pb_advanced_table_body", "pb_table_tbody", separator: " ")
       end
     end
   end

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

@@ -1,21 +1,18 @@
-<%= 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>
+<%= 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] %>
                     <% end %>
-                    <%= cell[:label] %>
                 <% end %>
+            <% end %>
         <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
 <% end %>

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

@@ -16,84 +16,6 @@ module Playbook
       def th_classname
         generate_classname("table-header-cells", separator: " ")
       end
-
-      def header_rows
-        wrapped_columns = wrap_leaf_columns(column_definitions)
-
-        rows = []
-        max_depth = compute_max_depth(wrapped_columns)
-        max_depth.times { rows << [] }
-        process_columns(wrapped_columns, rows, 0, max_depth)
-        rows
-      end
-
-    private
-
-      def compute_max_depth(columns)
-        columns.map do |col|
-          col[:columns] ? 1 + compute_max_depth(col[:columns]) : 1
-        end.max || 1
-      end
-
-      def process_columns(columns, rows, current_depth, max_depth)
-        total_columns = columns.size
-        columns.each_with_index do |col, index|
-          is_last = index == total_columns - 1
-          if col[:columns]
-            colspan = compute_leaf_columns(col[:columns])
-            rows[current_depth] << {
-              label: col[:label],
-              colspan: colspan,
-              is_last_in_group: is_last && current_depth.positive?,
-            }
-
-            process_columns(col[:columns], rows, current_depth + 1, max_depth)
-          else
-            colspan = 1
-            rows[current_depth] << {
-              label: col[:label],
-              colspan: colspan,
-              accessor: col[:accessor],
-              sort_menu: col[:sort_menu],
-              is_last_in_group: is_last && current_depth.positive?,
-            }
-          end
-        end
-      end
-
-      def compute_leaf_columns(columns)
-        columns.reduce(0) do |sum, col|
-          col[:columns] ? sum + compute_leaf_columns(col[:columns]) : sum + 1
-        end
-      end
-
-      def wrap_leaf_columns(column_definitions)
-        max_depth = compute_max_depth(column_definitions)
-
-        column_definitions.map do |col|
-          if col.key?(:columns)
-            {
-              label: col[:label],
-              columns: wrap_leaf_columns(col[:columns]),
-            }
-          else
-            # For leaf columns, wrap with empty labels up to max depth to get proper structure
-            wrap_leaf_column(col, max_depth)
-          end
-        end
-      end
-
-      def wrap_leaf_column(col, max_depth)
-        wrapped = {
-          accessor: col[:accessor],
-          label: col[:label] || "",
-          sort_menu: col[:sort_menu] || nil,
-        }
-        (max_depth - 1).times do
-          wrapped = { label: "", columns: [wrapped] }
-        end
-        wrapped
-      end
     end
   end
 end

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

@@ -1,7 +1,6 @@
-<%= pb_content_tag(:tr) do %>
+<%= pb_content_tag do %>
         <% object.column_definitions.each_with_index do |column, index| %>
-            <% next unless column[:accessor].present? %>
-            <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column)}) do %>
+            <%= pb_rails("table/table_cell", props: { tag:"div", classname:object.td_classname}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
                     <% if collapsible_trail && index.zero? %>
                         <% (1..depth).each do |i| %>
@@ -14,7 +13,7 @@
                     <div style="padding-left: <%= depth * 1.25 %>em">
                         <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
                             <% if index.zero? && object.row[:children].present? %>
-                                <button id="<%= "#{object.id}_#{object.row.object_id}" %>" class="gray-icon expand-toggle-icon" data-advanced-table="true" >
+                                <button id="<%= object.row.object_id.to_s + object.id %>" class="gray-icon expand-toggle-icon" data-advanced-table="true" >
                                     <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %> 
                                     <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
                                 </button>