playbook_ui_docs 14.12.0.pre.alpha.PLAY1602lightboxoverlapnitrobug5646 → 14.12.0.pre.alpha.advancedtablealignmentfixes5693
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb +38 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb +1 -3
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md +7 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +12 -8
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb +52 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.md +0 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.html.erb +52 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb +80 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +3 -0
- data/dist/playbook-doc.js +1 -1
- metadata +9 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 344b71ae89268038e47155204febd508fccf953b1e6100fd9f53597d3401c38e
|
|
4
|
+
data.tar.gz: f18620c7996d51d9353f1d083c888eea89a08ceeb08dc5dbb2fe11cf1f94b821
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 4cf2b4f16d213281ad0701f3f83231f47b47af9c5ba08087d3b928ad55beb1ea4a73eca09a09ffd404f0f053191311c642634fce78316ff6246fae749b218f9b
|
|
7
|
+
data.tar.gz: 6dbdd38729dc26c77140db5bc93578c618e46edfdf1e2951c9590da2cb8b6000db85a07392a37c54531d35c67d3701a10ee52634e8e42978558c8a31137423a7
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
|
|
2
|
+
<% column_definitions = [
|
|
3
|
+
{
|
|
4
|
+
accessor: "year",
|
|
5
|
+
label: "Year",
|
|
6
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
7
|
+
},
|
|
8
|
+
{
|
|
9
|
+
accessor: "newEnrollments",
|
|
10
|
+
label: "New Enrollments",
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
accessor: "scheduledMeetings",
|
|
14
|
+
label: "Scheduled Meetings",
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
accessor: "attendanceRate",
|
|
18
|
+
label: "Attendance Rate",
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
accessor: "completedClasses",
|
|
22
|
+
label: "Completed Classes",
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
accessor: "classCompletionRate",
|
|
26
|
+
label: "Class Completion Rate",
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
accessor: "graduatedStudents",
|
|
30
|
+
label: "Graduated Students",
|
|
31
|
+
},
|
|
32
|
+
] %>
|
|
33
|
+
|
|
34
|
+
<%= pb_rails("title", props: { size: 4 }) do %> Not Responsive <% end %>
|
|
35
|
+
<%= pb_rails("advanced_table", props: { id: "table_props_table_non_responsive", table_data: @table_data, column_definitions: column_definitions, responsive: "none" }) %>
|
|
36
|
+
|
|
37
|
+
<%= pb_rails("title", props: { padding_top: "sm", size: 4 }) do %> Responsive as Default <% end %>
|
|
38
|
+
<%= pb_rails("advanced_table", props: { id: "table_props_table_responsive", table_data: @table_data, column_definitions: column_definitions }) %>
|
|
@@ -5,6 +5,7 @@ examples:
|
|
|
5
5
|
- advanced_table_collapsible_trail_rails: Collapsible Trail
|
|
6
6
|
- advanced_table_table_props: Table Props
|
|
7
7
|
- advanced_table_beta_sort: Enable Sorting
|
|
8
|
+
- advanced_table_responsive: Responsive Tables
|
|
8
9
|
- advanced_table_custom_cell_rails: Custom Components for Cells
|
|
9
10
|
- advanced_table_column_headers: Multi-Header Columns
|
|
10
11
|
- advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
|
|
@@ -7,8 +7,7 @@
|
|
|
7
7
|
<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
|
|
8
8
|
<%= pb_rails("draggable/draggable_container") do %>
|
|
9
9
|
<% initial_items.each do |item| %>
|
|
10
|
-
|
|
11
|
-
<%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs"}) do %>
|
|
10
|
+
<%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs", drag_id: item[:id], draggable_item: true }) do %>
|
|
12
11
|
<%= pb_rails("flex", props:{align_items: "stretch", flex_direction:"column"}) do %>
|
|
13
12
|
<%= pb_rails("flex", props:{gap: "xs"}) do %>
|
|
14
13
|
<%= pb_rails("title", props: { text: item[:name], tag: "h4", size: 4 }) %>
|
|
@@ -32,7 +31,6 @@
|
|
|
32
31
|
<% end %>
|
|
33
32
|
<% end %>
|
|
34
33
|
<% end %>
|
|
35
|
-
<% end %>
|
|
36
34
|
<% end %>
|
|
37
35
|
<% end %>
|
|
38
36
|
<% end %>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
For a simplified version of the Draggable API for the Card kit, you can do the following:
|
|
2
|
+
|
|
3
|
+
Use the `draggable` kit and manage state as shown.
|
|
4
|
+
|
|
5
|
+
`draggable/draggable_container` kit creates the container within which the cards can be dragged and dropped.
|
|
6
|
+
|
|
7
|
+
The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggable_item` and `drag_id` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `drag_handle` is also available to show the drag handle icon.
|
|
@@ -8,27 +8,31 @@ const TableWithCollapsibleWithCustomContent = (props) => {
|
|
|
8
8
|
<Card
|
|
9
9
|
borderNone
|
|
10
10
|
borderRadius="none"
|
|
11
|
-
color="light"
|
|
11
|
+
color="light"
|
|
12
12
|
paddingX="xl"
|
|
13
13
|
paddingY="md"
|
|
14
14
|
{...props}
|
|
15
15
|
>
|
|
16
|
-
<Body paddingBottom="sm"
|
|
16
|
+
<Body paddingBottom="sm"
|
|
17
17
|
text="Expanded Custom Layout"
|
|
18
18
|
{...props}
|
|
19
19
|
/>
|
|
20
20
|
<Flex justify="between">
|
|
21
21
|
<Image
|
|
22
|
-
|
|
22
|
+
size="sm"
|
|
23
|
+
url="https://unsplash.it/500/400/?image=634"
|
|
23
24
|
/>
|
|
24
25
|
<Image
|
|
25
|
-
|
|
26
|
+
size="sm"
|
|
27
|
+
url="https://unsplash.it/500/400/?image=634"
|
|
26
28
|
/>
|
|
27
29
|
<Image
|
|
28
|
-
|
|
30
|
+
size="sm"
|
|
31
|
+
url="https://unsplash.it/500/400/?image=634"
|
|
29
32
|
/>
|
|
30
33
|
<Image
|
|
31
|
-
|
|
34
|
+
size="sm"
|
|
35
|
+
url="https://unsplash.it/500/400/?image=634"
|
|
32
36
|
/>
|
|
33
37
|
</Flex>
|
|
34
38
|
</Card>
|
|
@@ -52,7 +56,7 @@ const TableWithCollapsibleWithCustomContent = (props) => {
|
|
|
52
56
|
|
|
53
57
|
</Table.Head>
|
|
54
58
|
<Table.Body>
|
|
55
|
-
<Table.Row collapsible
|
|
59
|
+
<Table.Row collapsible
|
|
56
60
|
collapsibleContent={<Content/>}
|
|
57
61
|
{...props}
|
|
58
62
|
>
|
|
@@ -61,7 +65,7 @@ const TableWithCollapsibleWithCustomContent = (props) => {
|
|
|
61
65
|
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
62
66
|
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
63
67
|
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
64
|
-
<Table.Cell textAlign="right">{
|
|
68
|
+
<Table.Cell textAlign="right">{
|
|
65
69
|
<Icon
|
|
66
70
|
color="primary"
|
|
67
71
|
fixedWidth
|
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<% content = capture do %>
|
|
2
|
+
<%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
|
|
3
|
+
<%= pb_rails("body", props: { text: "Expanded Custom Layout", padding_bottom: "sm" }) %>
|
|
4
|
+
<%= pb_rails("flex", props: { justify: "between" }) do %>
|
|
5
|
+
<%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
|
|
6
|
+
<%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
|
|
7
|
+
<%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
|
|
8
|
+
<%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<% end %>
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("table", props: { size: "sm" }) do %>
|
|
14
|
+
<%= pb_rails("table/table_head") do %>
|
|
15
|
+
<%= pb_rails("table/table_row") do %>
|
|
16
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
|
|
17
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
|
|
18
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
|
|
19
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
|
|
20
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
|
|
21
|
+
<%= pb_rails("table/table_header", props: { text: ""}) %>
|
|
22
|
+
<% end %>
|
|
23
|
+
<% end %>
|
|
24
|
+
<%= pb_rails("table/table_body") do %>
|
|
25
|
+
<%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, id: "2" }) do %>
|
|
26
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
27
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
28
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
29
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
30
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
31
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
|
|
32
|
+
<%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
|
|
33
|
+
<% end %>
|
|
34
|
+
<% end %>
|
|
35
|
+
<%= pb_rails("table/table_row") 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: ""}) %>
|
|
42
|
+
<% end %>
|
|
43
|
+
<%= pb_rails("table/table_row") do %>
|
|
44
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
45
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
46
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
47
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
48
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
49
|
+
<%= pb_rails("table/table_cell", props: { text: ""}) %>
|
|
50
|
+
<% end %>
|
|
51
|
+
<% end %>
|
|
52
|
+
<% end %>
|
|
File without changes
|
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.html.erb
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<% content = capture do %>
|
|
2
|
+
<%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
|
|
3
|
+
<%= pb_rails("background", props: { tag: "tr" }) do %>
|
|
4
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
5
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
6
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
7
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
8
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<% end %>
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("table", props: { size: "sm" }) do %>
|
|
14
|
+
<%= pb_rails("table/table_head") do %>
|
|
15
|
+
<%= pb_rails("table/table_row") do %>
|
|
16
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
|
|
17
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
|
|
18
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
|
|
19
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
|
|
20
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
|
|
21
|
+
<%= pb_rails("table/table_header", props: { text: ""}) %>
|
|
22
|
+
<% end %>
|
|
23
|
+
<% end %>
|
|
24
|
+
<%= pb_rails("table/table_body") do %>
|
|
25
|
+
<%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "3" }) do %>
|
|
26
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
27
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
28
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
29
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
30
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
31
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
|
|
32
|
+
<%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
|
|
33
|
+
<% end %>
|
|
34
|
+
<% end %>
|
|
35
|
+
<%= pb_rails("table/table_row") 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: ""}) %>
|
|
42
|
+
<% end %>
|
|
43
|
+
<%= pb_rails("table/table_row") do %>
|
|
44
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
45
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
46
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
47
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
48
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
49
|
+
<%= pb_rails("table/table_cell", props: { text: ""}) %>
|
|
50
|
+
<% end %>
|
|
51
|
+
<% end %>
|
|
52
|
+
<% end %>
|
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
<% content = capture do %>
|
|
2
|
+
<%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
|
|
3
|
+
<%= pb_rails("table/table_head") do %>
|
|
4
|
+
<%= pb_rails("background", props: { tag: "tr" }) do %>
|
|
5
|
+
<%= pb_rails("table/table_header") do %>Alt Header<% end %>
|
|
6
|
+
<%= pb_rails("table/table_header") do %>Alt Header<% end %>
|
|
7
|
+
<%= pb_rails("table/table_header") do %>Alt Header<% end %>
|
|
8
|
+
<%= pb_rails("table/table_header") do %>Alt Header<% end %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<%= pb_rails("table/table_body") do %>
|
|
12
|
+
<%= pb_rails("table/table_row") do %>
|
|
13
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
14
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
15
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
16
|
+
<%= pb_rails("table/table_cell") do %>
|
|
17
|
+
<%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
|
|
18
|
+
<% end %>
|
|
19
|
+
<% end %>
|
|
20
|
+
<%= pb_rails("table/table_row") do %>
|
|
21
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
22
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
23
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
24
|
+
<%= pb_rails("table/table_cell") do %>
|
|
25
|
+
<%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
|
|
26
|
+
<% end %>
|
|
27
|
+
<% end %>
|
|
28
|
+
<%= pb_rails("table/table_row") do %>
|
|
29
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
30
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
31
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
32
|
+
<%= pb_rails("table/table_cell") do %>
|
|
33
|
+
<%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
|
|
34
|
+
<% end %>
|
|
35
|
+
<% end %>
|
|
36
|
+
<% end %>
|
|
37
|
+
<% end %>
|
|
38
|
+
<% end %>
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
<%= pb_rails("table", props: { size: "sm" }) do %>
|
|
42
|
+
<%= pb_rails("table/table_head") do %>
|
|
43
|
+
<%= pb_rails("table/table_row") do %>
|
|
44
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
|
|
45
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
|
|
46
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
|
|
47
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
|
|
48
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
|
|
49
|
+
<%= pb_rails("table/table_header", props: { text: ""}) %>
|
|
50
|
+
<% end %>
|
|
51
|
+
<% end %>
|
|
52
|
+
<%= pb_rails("table/table_body") do %>
|
|
53
|
+
<%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "4" }) do %>
|
|
54
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
55
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
56
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
57
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
58
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
59
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
|
|
60
|
+
<%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
|
|
61
|
+
<% end %>
|
|
62
|
+
<% end %>
|
|
63
|
+
<%= pb_rails("table/table_row") do %>
|
|
64
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
65
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
66
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
67
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
68
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
69
|
+
<%= pb_rails("table/table_cell", props: { text: ""}) %>
|
|
70
|
+
<% end %>
|
|
71
|
+
<%= pb_rails("table/table_row") do %>
|
|
72
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
73
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
74
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
75
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
76
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
77
|
+
<%= pb_rails("table/table_cell", props: { text: ""}) %>
|
|
78
|
+
<% end %>
|
|
79
|
+
<% end %>
|
|
80
|
+
<% end %>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The `collapsible_content` can also be used to display nested Tables within each Row.
|
|
@@ -31,6 +31,9 @@ examples:
|
|
|
31
31
|
- table_with_subcomponents_as_divs: Table with Sub Components (Divs)
|
|
32
32
|
- table_outer_padding: Outer Padding
|
|
33
33
|
- table_with_collapsible: Table with Collapsible
|
|
34
|
+
- table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
|
|
35
|
+
- table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
|
|
36
|
+
- table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
|
|
34
37
|
|
|
35
38
|
react:
|
|
36
39
|
- table_sm: Small
|