<%# Example data for demonstration purposes %> <% data_rows = [ { 'territory' => 'North', 'firstname' => 'John', 'lastname' => 'Doe', 'age' => 30, 'job' => 'Engineer' }, { 'territory' => 'South', 'firstname' => 'Alice', 'lastname' => 'Smith', 'age' => 28, 'job' => 'Designer' }, { 'territory' => 'East', 'firstname' => 'Mike', 'lastname' => 'Johnson', 'age' => 35, 'job' => 'Manager' }, { 'territory' => 'West', 'firstname' => 'Sarah', 'lastname' => 'Brown', 'age' => 29, 'job' => 'Developer' }, { 'territory' => 'Central', 'firstname' => 'David', 'lastname' => 'Wilson', 'age' => 32, 'job' => 'Analyst' } ] %> <%# Example sort method for demonstration purposes %> <% if params["sort"] %> <% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %> <% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %> <% data_rows.sort! do |a, b| value_a = a[sort_param] value_b = b[sort_param] value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/) value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/) sort_direction * (value_a <=> value_b) end %> <% end %> <%= pb_rails("table", props: { data_table: true, vertical_border: true, id: "table-header" } ) do %> <%= pb_rails("table/table_header", props: { text: "Territory", id: "territory", sort_menu: [ { item: "Territory", link: "?sort=territory_asc#table-header", active: params["sort"] == "territory_asc", direction: "asc" }, { item: "Territory", link: "?sort=territory_desc#table-header", active: params["sort"] == "territory_desc", direction: "desc" } ], }) %> <%= pb_rails("table/table_header", props: { id: "name", text: "Full Name", colspan: 2, sort_menu: [ { item: "First Name", link: "?sort=firstname_desc#table-header", active: params["sort"] == "firstname_desc", direction: "desc" }, { item: "First Name", link: "?sort=firstname_asc#table-header", active: params["sort"] == "firstname_asc", direction: "asc" }, { item: "Last Name", link: "?sort=lastname_desc#table-header", active: params["sort"] == "lastname_desc", direction: "desc" }, { item: "Last Name", link: "?sort=lastname_asc#table-header", active: params["sort"] == "lastname_asc", direction: "asc" } ], }) %> <%= pb_rails("table/table_header", props: { text: "Age", id: "age", sort_menu: [ { item: "Age Descending", link: "?sort=age_desc#table-header", active: params["sort"] == "age_desc", direction: "desc" }, { item: "Age Ascending", link: "?sort=age_asc#table-header", active: params["sort"] == "age_asc", direction: "asc" } ], }) %> <%= pb_rails("table/table_header", props: { text: "Job Title" }) %> <% data_rows.each do |row| %> <% row.each do |key, value| %> <%= pb_rails("background", props: { background_color: (params["sort"] && params["sort"].start_with?(key) ? "info_subtle" : "card_light"), text_align: (value.is_a?(Integer) ? "right" : ""), tag: "td" }) do %> <%= value %> <% end %> <% end %> <% end %> <% end %>