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..a7d88c83e4 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,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 %> \ 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 48248103d0..030092b438 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..f17cc65004 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,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 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..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 @@ -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_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 %> <% 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..8eda1214b7 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,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 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..50cffd075b 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: "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 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..d13840925b 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,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