playbook_ui 14.10.0.pre.alpha.play16825301 → 14.10.0.pre.rc.0

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

@@ -1,231 +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 ExpandedRows
-        const ancestorIds = dataContent.split("-").slice(0, -1);
-
-        const prefixedAncestorIds = ancestorIds.map(
-          (id) => `${childRow.id}_${id}`
-        );
-        const allAncestorsExpanded = prefixedAncestorIds.every((id) =>
-          PbAdvancedTable.expandedRows.has(id)
-        );
-
-        const checkIfParentIsExpanded = () => {
-          if (dataContent.endsWith("sr")) {
-            const parentRowId = childRow.dataset.rowParent;
-            const isParentVisible =
-              childRow.previousElementSibling.classList.contains("is-visible");
-            if (parentRowId) {
-              const isInSet = PbAdvancedTable.expandedRows.has(parentRowId);
-              if (isInSet && isParentVisible) {
-                return true;
-              }
-            }
-          }
-          return false;
-        };
-
-        if (allAncestorsExpanded || checkIfParentIsExpanded()) {
-          childRow.style.display = "table-row";
-          childRow.classList.add("is-visible");
-        } else {
-          childRow.style.display = "none";
-          childRow.classList.remove("is-visible");
-        }
-      });
-    });
+  showElement(elem) {
+    const getHeight = () => {
+      elem.style.display = 'block'
+      const height = elem.scrollHeight + 'px'
+      elem.style.display = ''
+      return height
+    }
+
+    const height = getHeight()
+    elem.classList.add('is-visible')
+    elem.style.height = height
+    elem.style.overflow = "hidden"
+
+    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-row-depth='0'] [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);
-        }
-      });
-
-      PbAdvancedTable.expandedRows.forEach((rowId) => {
-        const nestedButton = table.querySelector(
-          `[data-advanced-table][id="${rowId}"]`
-        );
-        if (nestedButton && !firstLevelButtons.contains(nestedButton)) {
-          nestedButton.click();
+      firstLevelButtons.forEach(button => {
+        if (!this.expandedRows.has(button.id)) {
+          button.click()
         }
-      });
+      })
     }
   }
-
   static handleToggleAllSubRows(element, rowDepth) {
-    const table = element.closest(".pb_table");
-    const parentRow = element.closest("tr");
-    if (!parentRow) {
-      return;
-    }
-    const rowParentId = parentRow.dataset.rowParent;
-    // Select all buttons that for subrows at that depth and with same rowParent
-    const subRowButtons = table.querySelectorAll(
-      `.pb_advanced_table_body > .pb_table_tr[data-row-depth='${rowDepth}'].pb_table_tr[data-row-parent='${rowParentId}'] [data-advanced-table]`
-    );
-
-    const allExpanded = Array.from(subRowButtons).every(
-      (button) =>
-        button.querySelector(UP_ARROW_SELECTOR).style.display === "inline-block"
-    );
-
-    if (allExpanded) {
-      subRowButtons.forEach((button) => {
-        button.click();
-        PbAdvancedTable.expandedRows.delete(button.id);
-      });
+    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 (!PbAdvancedTable.expandedRows.has(button.id)) {
-          button.click();
-          PbAdvancedTable.expandedRows.add(button.id);
+      subrowButtons.forEach(button => {
+        if (!this.expandedRows.has(button.id)) {
+          button.click()
         }
-      });
+      })
     }
   }
 }
 
 window.expandAllRows = (element) => {
-  PbAdvancedTable.handleToggleAllHeaders(element);
-};
-
+  PbAdvancedTable.handleToggleAllHeaders(element)
+}
 window.expandAllSubRows = (element, rowDepth) => {
-  PbAdvancedTable.handleToggleAllSubRows(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

@@ -14,59 +14,20 @@ module Playbook
                                      default: "header"
       prop :subrow_headers, type: Playbook::Props::Array,
                             default: []
-      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, additional_classes: "", table_data_attributes: {})
-        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?
 
-        subrow_ancestor_ids = ancestor_ids + ["#{row.object_id}sr"]
-        subrow_data_attributes = {
-          advanced_table_content: subrow_ancestor_ids.join("-"),
-          row_depth: current_depth,
-          row_parent: "#{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", subrow_data_attributes: subrow_data_attributes }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
-
-        current_data_attributes = current_depth.zero? ? { row_depth: 0 } : table_data_attributes
+        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] }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
 
-        # Additional class and data attributes needed for toggle logic
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes })
+        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: column_definitions, depth: current_depth })
 
         if row[:children].present?
-          row[:children].each do |child_row|
-            is_first_child = row[:children].first == child_row
-            immediate_parent_id = row.object_id
-            data_content = new_ancestor_ids.join("-") + "-#{child_row.object_id}"
-
-            child_data_attributes = {
-              top_parent: "#{id}_#{top_parent_id}",
-              row_depth: current_depth + 1,
-              row_parent: "#{id}_#{immediate_parent_id}",
-              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)
+          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
 
@@ -74,17 +35,7 @@ module Playbook
       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,16 @@
-<%= 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)">
+                                <%= 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 %>
+<% 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,20 +1,11 @@
-<%= 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| %>
-                            <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
-                            <% left_offset = i * 1.0 + additional_offset %>
-                            <div class="collapsible-trail" style="left: <%= left_offset %>em"></div>
-                        <% end %>
-                    <% end %>
-
                     <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>

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

@@ -9,23 +9,13 @@ module Playbook
                                 default: []
       prop :row
       prop :depth
-      prop :collapsible_trail, type: Playbook::Props::Boolean,
-                               default: true
-      prop :table_data_attributes, type: Playbook::Props::HashProp,
-                                   default: {}
-
-      def data
-        Hash(prop(:data)).merge(table_data_attributes)
-      end
 
       def classname
         generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
       end
 
-      def td_classname(column)
-        classes = %w[id-cell chrome-styles]
-        classes << "last-cell" if column[:is_last_in_group]
-        classes.join(" ")
+      def td_classname
+        generate_classname("id-cell", "chrome-styles", separator: " ")
       end
 
       def depth_accessors
@@ -37,8 +27,6 @@ module Playbook
     private
 
       def custom_renderer_value(column, index)
-        return nil unless column[:accessor].present?
-
         if index.zero?
           if depth.zero?
             row[column[:accessor].to_sym]
@@ -47,7 +35,6 @@ module Playbook
               key = item.to_sym
               return row[key] if depth - 1 == accessor_index
             end
-            nil
           end
         else
           row[column[:accessor].to_sym]

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

@@ -1,15 +1,11 @@
-<%= pb_content_tag(:tr) do %>
+<%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
         <% object.column_definitions.each_with_index do |column, index| %>
-            <%= pb_rails("table/table_cell", props: { classname: "id-cell chrome-styles"}) do %>
+            <%= pb_rails("table/table_cell", props: { tag: "div", classname: object.td_classname}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: "start" }) do %>
-                    <% if collapsible_trail && index.zero? %>
-                        <% (1..depth).each do |i| %>
-                            <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
-                            <% left_offset = i * 1.0 + additional_offset %>
-                            <div class="collapsible-trail" style="left: <%= left_offset %>em"></div>
-                        <% end %>
-                    <% end %>
-
                     <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? %>

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

@@ -12,17 +12,13 @@ module Playbook
                                      default: "header"
       prop :subrow_header, type: Playbook::Props::String,
                            default: ""
-      prop :collapsible_trail, type: Playbook::Props::Boolean,
-                               default: true
-      prop :subrow_data_attributes, type: Playbook::Props::HashProp,
-                                    default: {}
 
-      def data
-        Hash(prop(:data)).merge(subrow_data_attributes)
+      def classname
+        generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
       end
 
-      def classname
-        generate_classname("pb_table_tr", "bg-silver", "pb_subrow_header", subrow_depth_classname, separator: " ")
+      def td_classname
+        generate_classname("id-cell", "chrome-styles", separator: " ")
       end
 
     private