playbook_ui_docs 14.9.0.pre.rc.17 → 14.10.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5137
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_collapsible_trail_rails.html.erb +36 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx +50 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx +57 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.md +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_pagination_mock_data.json +5600 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +53 -49
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb +29 -36
- data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx +6 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +21 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx +50 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_header.md +1 -1
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx +31 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.md +6 -0
- data/app/pb_kits/playbook/pb_drawer/docs/example.yml +1 -1
- data/app/pb_kits/playbook/pb_drawer/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +25 -5
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.html.erb +17 -1
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx +15 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.md +2 -1
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx +166 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx +2 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx +89 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb +77 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +75 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +108 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +94 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md +0 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx +83 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx +120 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +5 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.jsx +88 -0
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +9 -2
- data/dist/playbook-doc.js +1 -1
- metadata +26 -2
@@ -0,0 +1,166 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
|
3
|
+
|
4
|
+
const SortingChangeCallback = (sortOptions) => {
|
5
|
+
alert(JSON.stringify(sortOptions[0]))
|
6
|
+
}
|
7
|
+
|
8
|
+
const SkeletonLoadingFilter = (props) => {
|
9
|
+
const isLoading = true
|
10
|
+
|
11
|
+
const options = [
|
12
|
+
{ value: 'USA' },
|
13
|
+
{ value: 'Canada' },
|
14
|
+
{ value: 'Brazil' },
|
15
|
+
{ value: 'Philippines' },
|
16
|
+
{ value: 'A galaxy far far away, like really far away...' },
|
17
|
+
]
|
18
|
+
|
19
|
+
return (
|
20
|
+
<div>
|
21
|
+
<div>
|
22
|
+
{isLoading ? (
|
23
|
+
<Card
|
24
|
+
marginBottom="lg"
|
25
|
+
{...props}
|
26
|
+
>
|
27
|
+
<Flex
|
28
|
+
alignItems="center"
|
29
|
+
justify="between"
|
30
|
+
orientation="row"
|
31
|
+
>
|
32
|
+
<Flex
|
33
|
+
alignItems="center"
|
34
|
+
justify="start"
|
35
|
+
orientation="row"
|
36
|
+
>
|
37
|
+
<SkeletonLoading
|
38
|
+
borderRadius="rounded"
|
39
|
+
height="40px"
|
40
|
+
marginRight="sm"
|
41
|
+
width="40px"
|
42
|
+
{...props}
|
43
|
+
/>
|
44
|
+
<SkeletonLoading
|
45
|
+
height="16px"
|
46
|
+
marginRight="md"
|
47
|
+
width="80px"
|
48
|
+
{...props}
|
49
|
+
/>
|
50
|
+
</Flex>
|
51
|
+
<Flex
|
52
|
+
alignItems="center"
|
53
|
+
justify="end"
|
54
|
+
orientation="row"
|
55
|
+
>
|
56
|
+
<SkeletonLoading
|
57
|
+
height="18px"
|
58
|
+
width="120px"
|
59
|
+
{...props}
|
60
|
+
/>
|
61
|
+
</Flex>
|
62
|
+
</Flex>
|
63
|
+
</Card>
|
64
|
+
) : (
|
65
|
+
<Filter
|
66
|
+
filters={{ 'Full Name': 'John Wick' }}
|
67
|
+
marginBottom="lg"
|
68
|
+
minWidth="375px"
|
69
|
+
results={546}
|
70
|
+
sortOptions={{
|
71
|
+
popularity: 'Popularity',
|
72
|
+
// eslint-disable-next-line
|
73
|
+
manager_title: 'Manager\'s Title',
|
74
|
+
// eslint-disable-next-line
|
75
|
+
manager_name: 'Manager\'s Name',
|
76
|
+
}}
|
77
|
+
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
78
|
+
>
|
79
|
+
{({ closePopover }) => (
|
80
|
+
<form>
|
81
|
+
<TextInput
|
82
|
+
label="Example Text Field"
|
83
|
+
placeholder="Enter Text"
|
84
|
+
/>
|
85
|
+
<Select
|
86
|
+
blankSelection="Select One..."
|
87
|
+
label="Example Collection Select"
|
88
|
+
name="Collection Select"
|
89
|
+
options={options}
|
90
|
+
/>
|
91
|
+
<Flex spacing="between">
|
92
|
+
<Button
|
93
|
+
onClick={closePopover}
|
94
|
+
text="Filter"
|
95
|
+
/>
|
96
|
+
<Button
|
97
|
+
text="Defaults"
|
98
|
+
variant="secondary"
|
99
|
+
/>
|
100
|
+
</Flex>
|
101
|
+
</form>
|
102
|
+
)}
|
103
|
+
</Filter>
|
104
|
+
)}
|
105
|
+
</div>
|
106
|
+
<div>
|
107
|
+
{isLoading ? (
|
108
|
+
<SkeletonLoading
|
109
|
+
height="127px"
|
110
|
+
marginBottom="lg"
|
111
|
+
width="100%"
|
112
|
+
{...props}
|
113
|
+
/>
|
114
|
+
) : (
|
115
|
+
<Filter
|
116
|
+
double
|
117
|
+
filters={{
|
118
|
+
'Full Name': 'John Wick',
|
119
|
+
'City': 'San Francisco',
|
120
|
+
}}
|
121
|
+
marginBottom="xl"
|
122
|
+
minWidth="375px"
|
123
|
+
onSortChange={SortingChangeCallback}
|
124
|
+
results={1}
|
125
|
+
sortOptions={{
|
126
|
+
popularity: 'Popularity',
|
127
|
+
// eslint-disable-next-line
|
128
|
+
manager_title: 'Manager\'s Title',
|
129
|
+
// eslint-disable-next-line
|
130
|
+
manager_name: 'Manager\'s Name',
|
131
|
+
}}
|
132
|
+
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
133
|
+
>
|
134
|
+
{({ closePopover }) => (
|
135
|
+
<form>
|
136
|
+
<TextInput
|
137
|
+
label="Full Name"
|
138
|
+
placeholder="Enter name"
|
139
|
+
/>
|
140
|
+
<Select
|
141
|
+
blankSelection="Select One..."
|
142
|
+
label="Territory"
|
143
|
+
maxWidth="sm"
|
144
|
+
name="location"
|
145
|
+
options={options}
|
146
|
+
/>
|
147
|
+
<Flex spacing="between">
|
148
|
+
<Button
|
149
|
+
onClick={closePopover}
|
150
|
+
text="Filter"
|
151
|
+
/>
|
152
|
+
<Button
|
153
|
+
text="Defaults"
|
154
|
+
variant="secondary"
|
155
|
+
/>
|
156
|
+
</Flex>
|
157
|
+
</form>
|
158
|
+
)}
|
159
|
+
</Filter>
|
160
|
+
)}
|
161
|
+
</div>
|
162
|
+
</div>
|
163
|
+
)
|
164
|
+
}
|
165
|
+
|
166
|
+
export default SkeletonLoadingFilter;
|
@@ -20,6 +20,7 @@ const SkeletonLoadingHeightWidth = (props) => (
|
|
20
20
|
<Card htmlOptions={{ style: { height: '200px', width: '100%' }}}
|
21
21
|
marginBottom="md"
|
22
22
|
padding="none"
|
23
|
+
{...props}
|
23
24
|
>
|
24
25
|
<SkeletonLoading
|
25
26
|
borderRadius="md"
|
@@ -31,6 +32,7 @@ const SkeletonLoadingHeightWidth = (props) => (
|
|
31
32
|
</Card>
|
32
33
|
<Card htmlOptions={{ style: { height: '200px', width: '100%' }}}
|
33
34
|
padding="none"
|
35
|
+
{...props}
|
34
36
|
>
|
35
37
|
<SkeletonLoading
|
36
38
|
borderRadius="md"
|
@@ -0,0 +1,89 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { Flex, SkeletonLoading, User } from "playbook-ui";
|
3
|
+
|
4
|
+
const SkeletonLoadingUser = (props) => {
|
5
|
+
const isLoading = true
|
6
|
+
|
7
|
+
return (
|
8
|
+
<div>
|
9
|
+
<div>
|
10
|
+
{isLoading ? (
|
11
|
+
<Flex alignItems="center">
|
12
|
+
<SkeletonLoading
|
13
|
+
borderRadius="rounded"
|
14
|
+
height="38px"
|
15
|
+
paddingRight="sm"
|
16
|
+
width="38px"
|
17
|
+
{...props}
|
18
|
+
/>
|
19
|
+
<SkeletonLoading
|
20
|
+
gap="xxs"
|
21
|
+
height="18px"
|
22
|
+
stack="2"
|
23
|
+
width="161px"
|
24
|
+
{...props}
|
25
|
+
/>
|
26
|
+
</Flex>
|
27
|
+
) : (
|
28
|
+
<User
|
29
|
+
align="left"
|
30
|
+
avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
|
31
|
+
name="Anna Black"
|
32
|
+
orientation="horizontal"
|
33
|
+
title="Remodeling Consultant"
|
34
|
+
{...props}
|
35
|
+
/>
|
36
|
+
)}
|
37
|
+
</div>
|
38
|
+
<div>
|
39
|
+
{isLoading ? (
|
40
|
+
<Flex
|
41
|
+
alignItems="start"
|
42
|
+
paddingTop="md"
|
43
|
+
>
|
44
|
+
<Flex
|
45
|
+
alignItems="center"
|
46
|
+
flexDirection="column"
|
47
|
+
>
|
48
|
+
<SkeletonLoading
|
49
|
+
borderRadius="rounded"
|
50
|
+
height="80px"
|
51
|
+
paddingBottom="xs"
|
52
|
+
width="80px"
|
53
|
+
{...props}
|
54
|
+
/>
|
55
|
+
<SkeletonLoading
|
56
|
+
height="32px"
|
57
|
+
paddingBottom="xxs"
|
58
|
+
width="144px"
|
59
|
+
{...props}
|
60
|
+
/>
|
61
|
+
<SkeletonLoading
|
62
|
+
height="21px"
|
63
|
+
width="164px"
|
64
|
+
{...props}
|
65
|
+
/>
|
66
|
+
</Flex>
|
67
|
+
</Flex>
|
68
|
+
) : (
|
69
|
+
<Flex
|
70
|
+
alignItems="start"
|
71
|
+
paddingTop="md"
|
72
|
+
>
|
73
|
+
<User
|
74
|
+
align="center"
|
75
|
+
avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
|
76
|
+
name="Anna Black"
|
77
|
+
orientation="vertical"
|
78
|
+
size="lg"
|
79
|
+
title="Remodeling Consultant"
|
80
|
+
{...props}
|
81
|
+
/>
|
82
|
+
</Flex>
|
83
|
+
)}
|
84
|
+
</div>
|
85
|
+
</div>
|
86
|
+
)
|
87
|
+
}
|
88
|
+
|
89
|
+
export default SkeletonLoadingUser;
|
@@ -3,3 +3,5 @@ export { default as SkeletonLoadingColor } from './_skeleton_loading_color.jsx'
|
|
3
3
|
export { default as SkeletonLoadingLayout } from './_skeleton_loading_layout.jsx'
|
4
4
|
export { default as SkeletonLoadingBorderRadius } from './_skeleton_loading_border_radius.jsx'
|
5
5
|
export { default as SkeletonLoadingHeightWidth } from './_skeleton_loading_height_width.jsx'
|
6
|
+
export { default as SkeletonLoadingUser } from './_skeleton_loading_user.jsx'
|
7
|
+
export { default as SkeletonLoadingFilter } from './_skeleton_loading_filter.jsx'
|
@@ -0,0 +1,77 @@
|
|
1
|
+
<%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["1", "2", "3"] }) do %>
|
2
|
+
<thead>
|
3
|
+
<tr>
|
4
|
+
<th id="1">Column 1</th>
|
5
|
+
<th id="2">Column 2</th>
|
6
|
+
<th id="3">Column 3</th>
|
7
|
+
<th>Column 4</th>
|
8
|
+
<th>Column 5</th>
|
9
|
+
<th>Column 6</th>
|
10
|
+
<th>Column 7</th>
|
11
|
+
<th>Column 8</th>
|
12
|
+
<th>Column 9</th>
|
13
|
+
<th>Column 10</th>
|
14
|
+
<th>Column 11</th>
|
15
|
+
<th>Column 12</th>
|
16
|
+
<th>Column 13</th>
|
17
|
+
<th>Column 14</th>
|
18
|
+
<th>Column 15</th>
|
19
|
+
</tr>
|
20
|
+
</thead>
|
21
|
+
<tbody>
|
22
|
+
<tr>
|
23
|
+
<td id="1">Value 1</td>
|
24
|
+
<td id="2">Value 2</td>
|
25
|
+
<td id="3">Value 3</td>
|
26
|
+
<td>Value 4</td>
|
27
|
+
<td>Value 5</td>
|
28
|
+
<td>Value 6</td>
|
29
|
+
<td>Value 7</td>
|
30
|
+
<td>Value 8</td>
|
31
|
+
<td>Value 9</td>
|
32
|
+
<td>Value 10</td>
|
33
|
+
<td>Value 11</td>
|
34
|
+
<td>Value 12</td>
|
35
|
+
<td>Value 13</td>
|
36
|
+
<td>Value 14</td>
|
37
|
+
<td>Value 15</td>
|
38
|
+
|
39
|
+
</tr>
|
40
|
+
<tr>
|
41
|
+
<td id="1">Value 1</td>
|
42
|
+
<td id="2">Value 2</td>
|
43
|
+
<td id="3">Value 3</td>
|
44
|
+
<td>Value 4</td>
|
45
|
+
<td>Value 5</td>
|
46
|
+
<td>Value 6</td>
|
47
|
+
<td>Value 7</td>
|
48
|
+
<td>Value 8</td>
|
49
|
+
<td>Value 9</td>
|
50
|
+
<td>Value 10</td>
|
51
|
+
<td>Value 11</td>
|
52
|
+
<td>Value 12</td>
|
53
|
+
<td>Value 13</td>
|
54
|
+
<td>Value 14</td>
|
55
|
+
<td>Value 15</td>
|
56
|
+
|
57
|
+
</tr>
|
58
|
+
<tr>
|
59
|
+
<td id="1">Value 1</td>
|
60
|
+
<td id="2">Value 2</td>
|
61
|
+
<td id="3">Value 3</td>
|
62
|
+
<td>Value 4</td>
|
63
|
+
<td>Value 5</td>
|
64
|
+
<td>Value 6</td>
|
65
|
+
<td>Value 7</td>
|
66
|
+
<td>Value 8</td>
|
67
|
+
<td>Value 9</td>
|
68
|
+
<td>Value 10</td>
|
69
|
+
<td>Value 11</td>
|
70
|
+
<td>Value 12</td>
|
71
|
+
<td>Value 13</td>
|
72
|
+
<td>Value 14</td>
|
73
|
+
<td>Value 15</td>
|
74
|
+
|
75
|
+
</tr>
|
76
|
+
</tbody>
|
77
|
+
<% end %>
|
@@ -0,0 +1 @@
|
|
1
|
+
The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
|
@@ -0,0 +1,75 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Table, Icon, Body, Card } from 'playbook-ui'
|
3
|
+
|
4
|
+
const TableWithCollapsible = (props) => {
|
5
|
+
|
6
|
+
const Content = () => {
|
7
|
+
return (
|
8
|
+
<Card
|
9
|
+
borderNone
|
10
|
+
borderRadius="none"
|
11
|
+
padding="md"
|
12
|
+
{...props}
|
13
|
+
>
|
14
|
+
<Body {...props}>Nested content inside a Table Row</Body>
|
15
|
+
</Card>
|
16
|
+
);
|
17
|
+
};
|
18
|
+
|
19
|
+
return (
|
20
|
+
<Table
|
21
|
+
size="sm"
|
22
|
+
{...props}
|
23
|
+
>
|
24
|
+
<Table.Head>
|
25
|
+
<Table.Row>
|
26
|
+
<Table.Header>{'Column 1'}</Table.Header>
|
27
|
+
<Table.Header>{'Column 2'}</Table.Header>
|
28
|
+
<Table.Header>{'Column 3'}</Table.Header>
|
29
|
+
<Table.Header>{'Column 4'}</Table.Header>
|
30
|
+
<Table.Header>{'Column 5'}</Table.Header>
|
31
|
+
<Table.Header>{''}</Table.Header>
|
32
|
+
</Table.Row>
|
33
|
+
|
34
|
+
</Table.Head>
|
35
|
+
<Table.Body>
|
36
|
+
<Table.Row collapsible
|
37
|
+
collapsibleContent={<Content/>}
|
38
|
+
{...props}
|
39
|
+
>
|
40
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
41
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
42
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
43
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
44
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
45
|
+
<Table.Cell textAlign="right">{
|
46
|
+
<Icon
|
47
|
+
color="primary"
|
48
|
+
fixedWidth
|
49
|
+
icon="chevron-down"
|
50
|
+
/>}
|
51
|
+
</Table.Cell>
|
52
|
+
|
53
|
+
</Table.Row>
|
54
|
+
<Table.Row>
|
55
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
56
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
57
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
58
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
59
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
60
|
+
<Table.Cell>{''}</Table.Cell>
|
61
|
+
</Table.Row>
|
62
|
+
<Table.Row>
|
63
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
64
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
65
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
66
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
67
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
68
|
+
<Table.Cell>{''}</Table.Cell>
|
69
|
+
</Table.Row>
|
70
|
+
</Table.Body>
|
71
|
+
</Table>
|
72
|
+
)
|
73
|
+
}
|
74
|
+
|
75
|
+
export default TableWithCollapsible
|
@@ -0,0 +1 @@
|
|
1
|
+
The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsibleContent` prop to add any content to the collapsible Row.
|
@@ -0,0 +1,108 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Table, Card, Icon, Body } from 'playbook-ui'
|
3
|
+
|
4
|
+
const TableWithCollapsibleWithCustomClick = (props) => {
|
5
|
+
|
6
|
+
const Content = () => {
|
7
|
+
return (
|
8
|
+
<Card
|
9
|
+
borderNone
|
10
|
+
borderRadius="none"
|
11
|
+
padding="md"
|
12
|
+
{...props}
|
13
|
+
>
|
14
|
+
<Body {...props}>Nested content inside a Table Row</Body>
|
15
|
+
</Card>
|
16
|
+
);
|
17
|
+
};
|
18
|
+
|
19
|
+
|
20
|
+
return (
|
21
|
+
<Table
|
22
|
+
size="sm"
|
23
|
+
{...props}
|
24
|
+
>
|
25
|
+
<Table.Head>
|
26
|
+
<Table.Row>
|
27
|
+
<Table.Header>{'Column 1'}</Table.Header>
|
28
|
+
<Table.Header>{'Column 2'}</Table.Header>
|
29
|
+
<Table.Header>{'Column 3'}</Table.Header>
|
30
|
+
<Table.Header>{'Column 4'}</Table.Header>
|
31
|
+
<Table.Header>{'Column 5'}</Table.Header>
|
32
|
+
<Table.Header>{''}</Table.Header>
|
33
|
+
</Table.Row>
|
34
|
+
|
35
|
+
</Table.Head>
|
36
|
+
<Table.Body>
|
37
|
+
<Table.Row collapsible
|
38
|
+
collapsibleContent={<Content/>}
|
39
|
+
toggleCellId="cell-1"
|
40
|
+
{...props}
|
41
|
+
>
|
42
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
43
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
44
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
45
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
46
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
47
|
+
<Table.Cell cursor="pointer"
|
48
|
+
id="cell-1"
|
49
|
+
textAlign="right"
|
50
|
+
>
|
51
|
+
<Icon
|
52
|
+
color="primary"
|
53
|
+
fixedWidth
|
54
|
+
icon="chevron-down"
|
55
|
+
/>
|
56
|
+
</Table.Cell>
|
57
|
+
|
58
|
+
</Table.Row>
|
59
|
+
<Table.Row collapsible
|
60
|
+
collapsibleContent={<Content/>}
|
61
|
+
toggleCellId="cell-2"
|
62
|
+
{...props}
|
63
|
+
>
|
64
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
65
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
66
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
67
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
68
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
69
|
+
<Table.Cell cursor="pointer"
|
70
|
+
id="cell-2"
|
71
|
+
textAlign="right"
|
72
|
+
>
|
73
|
+
<Icon
|
74
|
+
color="primary"
|
75
|
+
fixedWidth
|
76
|
+
icon="chevron-down"
|
77
|
+
/>
|
78
|
+
</Table.Cell>
|
79
|
+
|
80
|
+
</Table.Row>
|
81
|
+
<Table.Row collapsible
|
82
|
+
collapsibleContent={<Content/>}
|
83
|
+
toggleCellId="cell-3"
|
84
|
+
{...props}
|
85
|
+
>
|
86
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
87
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
88
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
89
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
90
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
91
|
+
<Table.Cell cursor="pointer"
|
92
|
+
id="cell-3"
|
93
|
+
textAlign="right"
|
94
|
+
>
|
95
|
+
<Icon
|
96
|
+
color="primary"
|
97
|
+
fixedWidth
|
98
|
+
icon="chevron-down"
|
99
|
+
/>
|
100
|
+
</Table.Cell>
|
101
|
+
|
102
|
+
</Table.Row>
|
103
|
+
</Table.Body>
|
104
|
+
</Table>
|
105
|
+
)
|
106
|
+
}
|
107
|
+
|
108
|
+
export default TableWithCollapsibleWithCustomClick
|
@@ -0,0 +1,2 @@
|
|
1
|
+
When using the `collapsible` prop, the default functionality is that the entire Row will be clickable to toggle the Row. To limit the click event to a specific Table Cell, you can use the `toggleCellId` prop to pass in the id of the Cell you want to use as the trigger.
|
2
|
+
__NOTE__: `toggleCellId` and the id on the Cell you want to use as the trigger MUST be the same.
|
@@ -0,0 +1,94 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Table, Icon, Card, Body, Image, Flex } from 'playbook-ui'
|
3
|
+
|
4
|
+
const TableWithCollapsibleWithCustomContent = (props) => {
|
5
|
+
|
6
|
+
const Content = () => {
|
7
|
+
return (
|
8
|
+
<Card
|
9
|
+
borderNone
|
10
|
+
borderRadius="none"
|
11
|
+
color="light"
|
12
|
+
paddingX="xl"
|
13
|
+
paddingY="md"
|
14
|
+
{...props}
|
15
|
+
>
|
16
|
+
<Body paddingBottom="sm"
|
17
|
+
text="Expanded Custom Layout"
|
18
|
+
{...props}
|
19
|
+
/>
|
20
|
+
<Flex justify="between">
|
21
|
+
<Image
|
22
|
+
url="https://via.placeholder.com/150"
|
23
|
+
/>
|
24
|
+
<Image
|
25
|
+
url="https://via.placeholder.com/150"
|
26
|
+
/>
|
27
|
+
<Image
|
28
|
+
url="https://via.placeholder.com/150"
|
29
|
+
/>
|
30
|
+
<Image
|
31
|
+
url="https://via.placeholder.com/150"
|
32
|
+
/>
|
33
|
+
</Flex>
|
34
|
+
</Card>
|
35
|
+
);
|
36
|
+
};
|
37
|
+
|
38
|
+
return (
|
39
|
+
<Table
|
40
|
+
size="sm"
|
41
|
+
{...props}
|
42
|
+
>
|
43
|
+
<Table.Head>
|
44
|
+
<Table.Row>
|
45
|
+
<Table.Header>{'Column 1'}</Table.Header>
|
46
|
+
<Table.Header>{'Column 2'}</Table.Header>
|
47
|
+
<Table.Header>{'Column 3'}</Table.Header>
|
48
|
+
<Table.Header>{'Column 4'}</Table.Header>
|
49
|
+
<Table.Header>{'Column 5'}</Table.Header>
|
50
|
+
<Table.Header>{''}</Table.Header>
|
51
|
+
</Table.Row>
|
52
|
+
|
53
|
+
</Table.Head>
|
54
|
+
<Table.Body>
|
55
|
+
<Table.Row collapsible
|
56
|
+
collapsibleContent={<Content/>}
|
57
|
+
{...props}
|
58
|
+
>
|
59
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
60
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
61
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
62
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
63
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
64
|
+
<Table.Cell textAlign="right">{
|
65
|
+
<Icon
|
66
|
+
color="primary"
|
67
|
+
fixedWidth
|
68
|
+
icon="chevron-down"
|
69
|
+
/>}
|
70
|
+
</Table.Cell>
|
71
|
+
|
72
|
+
</Table.Row>
|
73
|
+
<Table.Row>
|
74
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
75
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
76
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
77
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
78
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
79
|
+
<Table.Cell>{''}</Table.Cell>
|
80
|
+
</Table.Row>
|
81
|
+
<Table.Row>
|
82
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
83
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
84
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
85
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
86
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
87
|
+
<Table.Cell>{''}</Table.Cell>
|
88
|
+
</Table.Row>
|
89
|
+
</Table.Body>
|
90
|
+
</Table>
|
91
|
+
)
|
92
|
+
}
|
93
|
+
|
94
|
+
export default TableWithCollapsibleWithCustomContent
|
File without changes
|