[PBNTR-771] Advanced Table Rails Refactor and Multi Column Headers (#…

…4052)

[Runway Story](https://runway.powerhrg.com/backlog_items/PBNTR-767)

- ✅ Refactor AdvancedTable for Rails to use html table instead of divs
- ✅ Redo toggling logic to account change
- ✅ children rows to retain expanded state when any item is toggled
- ✅ toggle all button to have access to expandedRows state
- ✅ Add logic for multiple column headers for Rails side of Advanced
Table
- ✅ Add logic for multiple levels of columns, not just 2
- ✅ Styling for multiple headers variant

![Screenshot 2024-12-31 at 4 01
10 PM](https://github.com/user-attachments/assets/1111093b-fda3-4fd6-979d-91cb9d171a86)

playbook/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) {

playbook/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 %>

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

@@ -10,9 +10,16 @@ class AdvancedTable < Playbook::KitBase
       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

playbook/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 %>

playbook/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 }) %>

playbook/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 }) %>

playbook/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)