diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb index 329d451b73..f11cc444b5 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb @@ -30,4 +30,4 @@ } ] %> -<%= pb_rails("advanced_table", props: {table_data: @table_data, column_definitions: column_definitions}) %> +<%= pb_rails("advanced_table", props: { id: "beta_table", table_data: @table_data, column_definitions: column_definitions }) %> diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb index 77aa012f69..6b987f9b57 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb @@ -55,5 +55,5 @@ <%= 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: "subrow_headers", 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, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %> <% end %> diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.html.erb b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.html.erb new file mode 100644 index 0000000000..a128beabd6 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.html.erb @@ -0,0 +1,53 @@ +<% + column_definitions = [ + { + accessor: "year", + label: "Year", + cellAccessors: ["quarter", "month", "day"], + custom_renderer: ->(row, value) { + capture do + pb_rails("flex") do + pb_rails("title", props: { text: value, size: 4 }) + + pb_rails("badge", props: { dark: true, margin_left: "xxs", text: row[:newEnrollments].to_i > 20 ? "High" : "Low", variant: "neutral" }) + end + end + } + }, + { + accessor: "newEnrollments", + label: "New Enrollments", + custom_renderer: ->(row, value) { pb_rails("pill", props: { text: value, variant: "success" }) } + }, + { + accessor: "scheduledMeetings", + label: "Scheduled Meetings", + custom_renderer: ->(row, value) { content_tag(:a, value, href: "#") } + }, + { + accessor: "attendanceRate", + label: "Attendance Rate", + custom_renderer: ->(row, value) { + capture do + pb_rails("flex", props: { align_items: "end", orientation: "column" }) do + pb_rails("detail", props: { bold: true, color: "default", text: value }) + + pb_rails("caption", props: { size: "xs", text: row[:graduatedStudents] }) + end + end + } + }, + { + accessor: "completedClasses", + label: "Completed Classes", + }, + { + accessor: "classCompletionRate", + label: "Class Completion Rate", + }, + { + accessor: "graduatedStudents", + label: "Graduated Students", + } + ] +%> + +<%= pb_rails("advanced_table", props: { id: "custom_cell", table_data: @table_data, column_definitions: column_definitions }) %> diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.md b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.md new file mode 100644 index 0000000000..2bcb300942 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.md @@ -0,0 +1,5 @@ +The Advanced Table also allows for rendering custom components within individual Cells. To achieve this, you can make use of the optional `custom_renderer` item within each column_definitions. This function gives you access to the current Cell's value if you just want to use that with a custom Kit, but it also gives you access to the entire `row` object. The row object provides all data for the current row. + +See [here](https://playbook.powerapp.cloud/kits/advanced_table/rails#column_definitions) for more indepth information on columnDefinitions are how to use them. + +See [here](https://github.com/powerhome/playbook/tree/master/playbook/app/pb_kits/playbook/pb_advanced_table#readme) for the structure of the tableData used. \ No newline at end of file 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 87fb7abf3d..8a3994a0b2 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 @@ -3,6 +3,7 @@ examples: - advanced_table_beta: Default (Required Props) - advanced_table_beta_subrow_headers: SubRow Headers - advanced_table_beta_sort: Enable Sorting + - advanced_table_custom_cell_rails: Custom Components for Cells react: - advanced_table_default: Default (Required Props) 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 30dd7e5950..4a16f93f2d 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 @@ -11,7 +11,9 @@ <% end %> <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %> - <% if index.zero? %> + <% if column[:custom_renderer].present? %> + <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %> + <% elsif index.zero? %> <% if object.depth.zero? %> <%= object.row[column[:accessor].to_sym] %> <% else %> 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 cdf81e9ab3..57bb025708 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 @@ -26,6 +26,21 @@ def depth_accessors private + def custom_renderer_value(column, index) + if index.zero? + if depth.zero? + row[column[:accessor].to_sym] + else + depth_accessors.each_with_index do |item, accessor_index| + key = item.to_sym + return row[key] if depth - 1 == accessor_index + end + end + else + row[column[:accessor].to_sym] + end + end + def subrow_depth_classname depth.positive? ? "depth-sub-row-#{depth}" : "" end