[PBNTR-743] Advanced Table - Add Responsiveness to Rails kit (#4151)

**What does this PR do?** A clear and concise description with your
runway ticket url.
As a Playbook dev, 
I want to add Responsiveness to our Rails Advanced Table kit,
so that I can ensure parity between our Rails and React kits.


**How to test?** Steps to confirm the desired behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See addition/change


#### Checklist:
- [X] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [X] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.

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

@@ -1,10 +1,15 @@
 <%= pb_content_tag do %>
-        <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark }.merge(object.table_props)) do %>
-          <% if content.present? %>
-            <% content.presence %>
-          <% else %>
-            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion }) %>
-            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions }) %>
-          <% end %>
-        <% end %>
+  <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive: "none", dark: dark }.merge(object.table_props)) do %>
+    <% if content.present? %>
+      <% content.presence %>
+    <% else %>
+      <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions,
+                                                            enable_toggle_expansion: object.enable_toggle_expansion,
+                                                            responsive: object.responsive }) %>
+      <%= pb_rails("advanced_table/table_body", props: { id: object.id,
+                                                         table_data: object.table_data,
+                                                         column_definitions: object.column_definitions,
+                                                         responsive: object.responsive }) %>
+    <% end %>
+  <% end %>
 <% end %>

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

@@ -12,7 +12,7 @@ class AdvancedTable < Playbook::KitBase
                                      default: "header"
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
-                        default: "none"
+                        default: "scroll"
       prop :table_props, type: Playbook::Props::HashProp,
                          default: {}
 

playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb

@@ -0,0 +1,38 @@
+
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+] %>
+
+<%= pb_rails("title", props: { size: 4 })  do %> Not Responsive <% end %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table_non_responsive", table_data: @table_data, column_definitions: column_definitions, responsive: "none" }) %>
+
+<%= pb_rails("title", props: { padding_top: "sm", size: 4 })  do %> Responsive as Default <% end %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table_responsive", table_data: @table_data, column_definitions: column_definitions }) %>

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

@@ -5,6 +5,7 @@ examples:
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_table_props: Table Props
   - advanced_table_beta_sort: Enable Sorting
+  - advanced_table_responsive: Responsive Tables
   - 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)

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

@@ -16,6 +16,9 @@ class TableBody < Playbook::KitBase
                             default: []
       prop :collapsible_trail, type: Playbook::Props::Boolean,
                                default: true
+      prop :responsive, type: Playbook::Props::Enum,
+                        values: %w[none scroll],
+                        default: "scroll"
 
       def flatten_columns(columns)
         columns.flat_map do |col|
@@ -46,12 +49,12 @@ def render_row_and_children(row, column_definitions, current_depth, first_parent
           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"
+        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 }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
 
         current_data_attributes = current_depth.zero? ? { row_depth: 0 } : table_data_attributes
 
         # 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: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive })
 
         if row[:children].present?
           row[:children].each do |child_row|
@@ -74,7 +77,16 @@ def render_row_and_children(row, column_definitions, current_depth, first_parent
       end
 
       def classname
-        generate_classname("pb_advanced_table_body", separator: " ")
+        additional_classes = []
+        additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
+
+        generate_classname("pb_advanced_table_body", *additional_classes, separator: " ")
+      end
+
+      def pinned_cell_class(index)
+        return "pinned-left" if index.zero? && responsive == "scroll"
+
+        ""
       end
 
     private

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

@@ -3,17 +3,17 @@
     <%= 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 %>
+        <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname(is_first_column: cell_index.zero?), ('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 %>

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

@@ -8,13 +8,22 @@ class TableHeader < 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: "scroll"
 
       def classname
-        generate_classname("pb_advanced_table_header", "pb_table_thead", separator: " ")
+        additional_classes = []
+        additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
+
+        generate_classname("pb_advanced_table_header", "pb_table_thead", *additional_classes, separator: " ")
       end
 
-      def th_classname
-        generate_classname("table-header-cells", separator: " ")
+      def th_classname(is_first_column: false)
+        additional_classes = []
+        additional_classes << "pinned-left" if is_first_column && responsive == "scroll"
+
+        generate_classname("table-header-cells", *additional_classes, separator: " ")
       end
 
       def header_rows

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

@@ -1,7 +1,7 @@
 <%= pb_content_tag(:tr) 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: { classname:object.td_classname(column, index)}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
                     <% if collapsible_trail && index.zero? %>
                         <% (1..depth).each do |i| %>

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

@@ -13,6 +13,11 @@ class TableRow < Playbook::KitBase
                                default: true
       prop :table_data_attributes, type: Playbook::Props::HashProp,
                                    default: {}
+      prop :responsive, type: Playbook::Props::Enum,
+                        values: %w[none scroll],
+                        default: "scroll"
+      prop :is_pinned_left, type: Playbook::Props::Boolean,
+                            default: false
 
       def data
         Hash(prop(:data)).merge(table_data_attributes)
@@ -22,9 +27,10 @@ def classname
         generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
       end
 
-      def td_classname(column)
+      def td_classname(column, index)
         classes = %w[id-cell chrome-styles]
         classes << "last-cell" if column[:is_last_in_group]
+        classes << "pinned-left" if index.zero? && is_pinned_left && responsive == "scroll"
         classes.join(" ")
       end
 

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

@@ -1,6 +1,6 @@
 <%= pb_content_tag(:tr) 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: { classname: object.td_classname(index) }) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: "start" }) do %>
                     <% if collapsible_trail && index.zero? %>
                         <% (1..depth).each do |i| %>

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

@@ -16,6 +16,9 @@ class TableSubrowHeader < Playbook::KitBase
                                default: true
       prop :subrow_data_attributes, type: Playbook::Props::HashProp,
                                     default: {}
+      prop :responsive, type: Playbook::Props::Enum,
+                        values: %w[none scroll],
+                        default: "scroll"
 
       def data
         Hash(prop(:data)).merge(subrow_data_attributes)
@@ -25,6 +28,12 @@ def classname
         generate_classname("pb_table_tr", "bg-silver", "pb_subrow_header", subrow_depth_classname, separator: " ")
       end
 
+      def td_classname(index)
+        classes = %w[id-cell chrome-styles]
+        classes << "pinned-left" if index.zero? && responsive == "scroll"
+        classes.join(" ")
+      end
+
     private
 
       def subrow_depth_classname