From 36b300a892a0b63dfd638c74ab3a0493ebb74b58 Mon Sep 17 00:00:00 2001 From: Sam Duncan Date: Wed, 22 Jan 2025 07:47:38 -0600 Subject: [PATCH 1/4] Added responsive to rails advanced table --- .../pb_advanced_table/advanced_table.html.erb | 23 +++++++---- .../pb_advanced_table/advanced_table.rb | 2 +- .../docs/_advanced_table_responsive.html.erb | 38 +++++++++++++++++++ .../pb_advanced_table/docs/example.yml | 1 + .../playbook/pb_advanced_table/table_body.rb | 21 ++++++++-- .../pb_advanced_table/table_header.html.erb | 22 +++++------ .../pb_advanced_table/table_header.rb | 18 +++++++-- .../pb_advanced_table/table_row.html.erb | 2 +- .../playbook/pb_advanced_table/table_row.rb | 8 +++- .../table_subrow_header.html.erb | 2 +- .../pb_advanced_table/table_subrow_header.rb | 11 ++++++ 11 files changed, 119 insertions(+), 29 deletions(-) create mode 100644 playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb b/playbook/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb index dd33cfc8e7..f4f1cff248 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb @@ -1,10 +1,17 @@ <%= 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: object.responsive, 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, + is_pinned_left: object.responsive == "scroll" }) %> + <%= pb_rails("advanced_table/table_body", props: { id: object.id, + table_data: object.table_data, + column_definitions: object.column_definitions, + responsive: object.responsive, + is_pinned_left: object.responsive == "scroll" }) %> + <% end %> + <% end %> <% end %> \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb b/playbook/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb index 32dc2e83f4..1614c1cbc3 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +++ b/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: {} diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb new file mode 100644 index 0000000000..5b9c697c26 --- /dev/null +++ b/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 }) %> diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml index ac372e59d9..308eff551b 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +++ b/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) diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/table_body.rb b/playbook/app/pb_kits/playbook/pb_advanced_table/table_body.rb index 52b0fd8bdf..a5d3430680 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/table_body.rb +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/table_body.rb @@ -16,6 +16,11 @@ 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: "none" + prop :is_pinned_left, type: Playbook::Props::Boolean, + default: false def flatten_columns(columns) columns.flat_map do |col| @@ -46,12 +51,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, is_pinned_left: is_pinned_left, 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, is_pinned_left: is_pinned_left }) if row[:children].present? row[:children].each do |child_row| @@ -74,7 +79,17 @@ 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}" if responsive == "scroll" + additional_classes << "pinned-left" if is_pinned_left && responsive == "scroll" + + generate_classname("pb_advanced_table_body", *additional_classes, separator: " ") + end + + def pinned_cell_class(index) + return "pinned-left" if index.zero? && is_pinned_left && responsive == "scroll" + + "" end private diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb b/playbook/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb index 7200c05e9b..d487bbf6c4 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +++ b/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 %> - - <% 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_row.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_row.size - 1 %> + + <% end %> + <%= cell[:label] %> + <% end %> <% end %> <% end %> <% end %> diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/table_header.rb b/playbook/app/pb_kits/playbook/pb_advanced_table/table_header.rb index e4a5b5d193..9c582b14cc 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/table_header.rb +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/table_header.rb @@ -8,13 +8,25 @@ 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: "none" + prop :is_pinned_left, type: Playbook::Props::Boolean, + default: false def classname - generate_classname("pb_advanced_table_header", "pb_table_thead", separator: " ") + additional_classes = [] + additional_classes << "advanced-table-responsive-#{responsive}" if responsive == "scroll" + additional_classes << "pinned-left" if is_pinned_left && 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" && is_pinned_left + + generate_classname("table-header-cells", *additional_classes, separator: " ") end def header_rows diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb b/playbook/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb index 9deaffbb0e..2a885ef0d0 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +++ b/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| %> diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/table_row.rb b/playbook/app/pb_kits/playbook/pb_advanced_table/table_row.rb index 9ff0e04f70..95d6663de9 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/table_row.rb +++ b/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: "none" + 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 diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb b/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb index 779e7d5c53..32b032452d 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +++ b/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| %> diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb b/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb index 58cdd3b14c..030f865085 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb @@ -16,6 +16,11 @@ 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: "none" + prop :is_pinned_left, type: Playbook::Props::Boolean, + default: false def data Hash(prop(:data)).merge(subrow_data_attributes) @@ -25,6 +30,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? && is_pinned_left && responsive == "scroll" + classes.join(" ") + end + private def subrow_depth_classname From 142d5648c993047d38f792ef813ae0a38fb077e5 Mon Sep 17 00:00:00 2001 From: Sam Duncan Date: Wed, 22 Jan 2025 13:06:14 -0600 Subject: [PATCH 2/4] Made requested changes --- playbook/app/pb_kits/playbook/pb_advanced_table/table_body.rb | 2 +- .../pb_kits/playbook/pb_advanced_table/table_header.html.erb | 4 ++-- .../app/pb_kits/playbook/pb_advanced_table/table_header.rb | 2 +- playbook/app/pb_kits/playbook/pb_advanced_table/table_row.rb | 2 +- .../pb_kits/playbook/pb_advanced_table/table_subrow_header.rb | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/table_body.rb b/playbook/app/pb_kits/playbook/pb_advanced_table/table_body.rb index a5d3430680..649df04baf 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/table_body.rb +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/table_body.rb @@ -18,7 +18,7 @@ class TableBody < Playbook::KitBase default: true prop :responsive, type: Playbook::Props::Enum, values: %w[none scroll], - default: "none" + default: "scroll" prop :is_pinned_left, type: Playbook::Props::Boolean, default: false diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb b/playbook/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb index d487bbf6c4..06f5aa06b3 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb @@ -4,8 +4,8 @@ <% 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(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_row.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_row.size - 1 %> + <%= 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 %>