Skip to content

Commit f38de91

Browse files
ElisaShapiroElisaShapiro
authored
[PBNTR-682] Table kit: Clickable Table Rows Doc Example (#4252)
**What does this PR do?** A clear and concise description with your runway ticket url. [PBNTR-682](https://runway.powerhrg.com/backlog_items/PBNTR-682) creates Rails and React doc examples showcasing clickable table rows functionality using preexisting Table kit logic. **Screenshots:** Screenshots to visualize your addition/change <img width="1331" alt="for PR rails doc ex" src="https://github.com/user-attachments/assets/14e56742-29ee-4301-82a9-c96ed902aae7" /> <img width="1334" alt="for PR react doc ex" src="https://github.com/user-attachments/assets/5996a97f-7105-4628-83d1-8f8a15b9ee12" /> **How to test?** Steps to confirm the desired behavior: 1. Go to "Table with Clickable Rows" doc example in milano env ([rails](https://pr4252.playbook.beta.px.powerapp.cloud/kits/table#table-with-clickable-rows) | [react](https://pr4252.playbook.beta.px.powerapp.cloud/kits/table/react#table-with-clickable-rows)) 2. Table in doc example appears stylistically similar to the group of "Table with Collapsible" doc examples above it. Click on a row in the table - a console log saying "Row X Clicked" will appear. #### 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. ~~- [ ] **TESTS** I have added test coverage to my code.~~
1 parent 71b0b20 commit f38de91

File tree

5 files changed

+140
-1
lines changed

5 files changed

+140
-1
lines changed

‎playbook/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.html.erb

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<%= pb_rails("table", props: { size: "sm" }) do %>
2+
<%= pb_rails("table/table_head") do %>
3+
<%= pb_rails("table/table_row") do %>
4+
<%= pb_rails("table/table_header", props: { text: "Column 1" }) %>
5+
<%= pb_rails("table/table_header", props: { text: "Column 2" }) %>
6+
<%= pb_rails("table/table_header", props: { text: "Column 3" }) %>
7+
<%= pb_rails("table/table_header", props: { text: "Column 4" }) %>
8+
<%= pb_rails("table/table_header", props: { text: "Column 5" }) %>
9+
<%= pb_rails("table/table_header", props: { text: "" }) %>
10+
<% end %>
11+
<% end %>
12+
<%= pb_rails("table/table_body") do %>
13+
<%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 1 clicked')" } }) do %>
14+
<%= pb_rails("table/table_cell", props: { text: "Value 1" }) %>
15+
<%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
16+
<%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
17+
<%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
18+
<%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
19+
<%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
20+
<%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
21+
<% end %>
22+
<% end %>
23+
24+
<%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 2 clicked')" } }) do %>
25+
<%= pb_rails("table/table_cell", props: { text: "Value 1" }) %>
26+
<%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
27+
<%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
28+
<%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
29+
<%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
30+
<%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
31+
<%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
32+
<% end %>
33+
<% end %>
34+
35+
<%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 3 clicked')" } }) do %>
36+
<%= pb_rails("table/table_cell", props: { text: "Value 1" }) %>
37+
<%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
38+
<%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
39+
<%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
40+
<%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
41+
<%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
42+
<%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
43+
<% end %>
44+
<% end %>
45+
<% end %>
46+
<% end %>
47+

‎playbook/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import React from 'react'
2+
import { Table, Icon } from 'playbook-ui'
3+
4+
const TableWithClickableRows = (props) => {
5+
6+
7+
return (
8+
<Table
9+
size="sm"
10+
{...props}
11+
>
12+
<Table.Head>
13+
<Table.Row>
14+
<Table.Header>{"Column 1"}</Table.Header>
15+
<Table.Header>{"Column 2"}</Table.Header>
16+
<Table.Header>{"Column 3"}</Table.Header>
17+
<Table.Header>{"Column 4"}</Table.Header>
18+
<Table.Header>{"Column 5"}</Table.Header>
19+
<Table.Header>{""}</Table.Header>
20+
</Table.Row>
21+
</Table.Head>
22+
<Table.Body>
23+
<Table.Row
24+
cursor="pointer"
25+
htmlOptions={{ onClick: () => alert("Row 1 clicked") }}
26+
{...props}
27+
>
28+
<Table.Cell>{"Value 1"}</Table.Cell>
29+
<Table.Cell>{"Value 2"}</Table.Cell>
30+
<Table.Cell>{"Value 3"}</Table.Cell>
31+
<Table.Cell>{"Value 4"}</Table.Cell>
32+
<Table.Cell>{"Value 5"}</Table.Cell>
33+
<Table.Cell textAlign="right">
34+
<Icon
35+
color="primary_action"
36+
fixedWidth
37+
icon="chevron-right"
38+
size="xs"
39+
{...props}
40+
/>
41+
</Table.Cell>
42+
</Table.Row>
43+
<Table.Row
44+
cursor="pointer"
45+
htmlOptions={{ onClick: () => alert("Row 2 clicked") }}
46+
{...props}
47+
>
48+
<Table.Cell>{"Value 1"}</Table.Cell>
49+
<Table.Cell>{"Value 2"}</Table.Cell>
50+
<Table.Cell>{"Value 3"}</Table.Cell>
51+
<Table.Cell>{"Value 4"}</Table.Cell>
52+
<Table.Cell>{"Value 5"}</Table.Cell>
53+
<Table.Cell textAlign="right">
54+
<Icon
55+
color="primary_action"
56+
fixedWidth
57+
icon="chevron-right"
58+
size="xs"
59+
{...props}
60+
/>
61+
</Table.Cell>
62+
</Table.Row>
63+
<Table.Row
64+
cursor="pointer"
65+
htmlOptions={{ onClick: () => alert("Row 3 clicked") }}
66+
{...props}
67+
>
68+
<Table.Cell>{"Value 1"}</Table.Cell>
69+
<Table.Cell>{"Value 2"}</Table.Cell>
70+
<Table.Cell>{"Value 3"}</Table.Cell>
71+
<Table.Cell>{"Value 4"}</Table.Cell>
72+
<Table.Cell>{"Value 5"}</Table.Cell>
73+
<Table.Cell textAlign="right">
74+
<Icon
75+
color="primary_action"
76+
fixedWidth
77+
icon="chevron-right"
78+
size="xs"
79+
{...props}
80+
/>
81+
</Table.Cell>
82+
</Table.Row>
83+
</Table.Body>
84+
</Table>
85+
)
86+
}
87+
88+
export default TableWithClickableRows

‎playbook/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Clickable table rows do not require any additional props. This doc example showcases how to set them up using `html_options`/`htmlOptions` and click events. Using the global prop for cursor to set it to "pointer" is also recommended for better UX.

‎playbook/app/pb_kits/playbook/pb_table/docs/example.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ examples:
3434
- table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
3535
- table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
3636
- table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
37+
- table_with_clickable_rows: Table with Clickable Rows
3738

3839
react:
3940
- table_sm: Small
@@ -70,3 +71,4 @@ examples:
7071
- table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
7172
- table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows
7273
- table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
74+
- table_with_clickable_rows: Table with Clickable Rows

‎playbook/app/pb_kits/playbook/pb_table/docs/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,4 +32,5 @@ export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
3232
export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
3333
export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
3434
export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'
35-
export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
35+
export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
36+
export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'

0 commit comments

Comments
 (0)