playbook_ui_docs 13.28.0.pre.alpha.PLAY13592980 → 13.28.0.pre.alpha.dialogturbostreameventlistener3017
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_draggable/docs/_draggable_default.jsx +53 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx +159 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx +121 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +9 -0
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +3 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx +33 -32
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx +33 -33
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx +51 -50
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.html.erb +54 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx +37 -38
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.html.erb +53 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/{_table_alignment_row.html.erb → _table_outer_padding.html.erb} +7 -7
- data/app/pb_kits/playbook/pb_table/docs/_table_outer_padding.jsx +76 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_outer_padding.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +9 -9
- data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
- data/dist/menu.yml +5 -2
- data/dist/playbook-doc.js +10 -10
- metadata +19 -6
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb +0 -63
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb +0 -52
- /data/app/pb_kits/playbook/pb_table/docs/{_table_alignment_column.html.erb → _table_alignment_column_rails.html.erb} +0 -0
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: b34adcf0cf6e69ef00d8e674b99a464f53d1e16ac1b21b7ef70da0a8a08f984c
|
|
4
|
+
data.tar.gz: 88903d7a40e3c0a4e871569efdef33a80f228f11810f13bfc4f23597217f6bcb
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 3944120abcd4b49b1b5aa1654bd49f784565f4689494b882f9f1d345bfa8171c64d06fc005c71cd3855215e3bab5d87b07149e775ff3249a9512b11898bd14ee
|
|
7
|
+
data.tar.gz: f30edac4812ee3c0f87899fb0e08e40d044f8ee73cc9d1085df14dcbf11cbd2d25893c3531b05006f5622fbe9acccd8959689e582199dd67c7e864d5ab802f9f
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import { SelectableList, Draggable, DraggableProvider } from "../../";
|
|
3
|
+
|
|
4
|
+
// Initial items to be dragged
|
|
5
|
+
const data = [
|
|
6
|
+
{
|
|
7
|
+
id: "1",
|
|
8
|
+
text: "Task 1",
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
id: "2",
|
|
12
|
+
text: "Task 2",
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
id: "3",
|
|
16
|
+
text: "Task 3",
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
id: "4",
|
|
20
|
+
text: "Task 4",
|
|
21
|
+
},
|
|
22
|
+
];
|
|
23
|
+
|
|
24
|
+
const DraggableDefault = (props) => {
|
|
25
|
+
const [initialState, setInitialState] = useState(data);
|
|
26
|
+
|
|
27
|
+
return (
|
|
28
|
+
<DraggableProvider initialItems={data}
|
|
29
|
+
onChange={(items) => setInitialState(items)}
|
|
30
|
+
>
|
|
31
|
+
<Draggable
|
|
32
|
+
{...props}
|
|
33
|
+
>
|
|
34
|
+
<Draggable.Container>
|
|
35
|
+
<SelectableList variant="checkbox">
|
|
36
|
+
{initialState.map(({ id, text }) => (
|
|
37
|
+
<Draggable.Item id={id}
|
|
38
|
+
key={id}
|
|
39
|
+
>
|
|
40
|
+
<SelectableList.Item label={text}
|
|
41
|
+
name={id}
|
|
42
|
+
value={id}
|
|
43
|
+
/>
|
|
44
|
+
</Draggable.Item>
|
|
45
|
+
))}
|
|
46
|
+
</SelectableList>
|
|
47
|
+
</Draggable.Container>
|
|
48
|
+
</Draggable>
|
|
49
|
+
</DraggableProvider>
|
|
50
|
+
);
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
export default DraggableDefault;
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import {
|
|
3
|
+
Flex,
|
|
4
|
+
Caption,
|
|
5
|
+
Card,
|
|
6
|
+
FlexItem,
|
|
7
|
+
Badge,
|
|
8
|
+
Avatar,
|
|
9
|
+
Title,
|
|
10
|
+
Body,
|
|
11
|
+
Draggable,
|
|
12
|
+
DraggableProvider,
|
|
13
|
+
} from "../../";
|
|
14
|
+
|
|
15
|
+
// Initial groups to drag between
|
|
16
|
+
const containers = ["To Do", "In Progress", "Done"];
|
|
17
|
+
|
|
18
|
+
// Initial items to be dragged
|
|
19
|
+
const data = [
|
|
20
|
+
{
|
|
21
|
+
id: "1",
|
|
22
|
+
container: "To Do",
|
|
23
|
+
title: "Task 1",
|
|
24
|
+
description: "Bug fixes",
|
|
25
|
+
assignee_name: "Terry Miles",
|
|
26
|
+
assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
id: "2",
|
|
30
|
+
container: "To Do",
|
|
31
|
+
title: "Task 2",
|
|
32
|
+
description: "Documentation",
|
|
33
|
+
assignee_name: "Sophia Miles",
|
|
34
|
+
assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
id: "3",
|
|
38
|
+
container: "In Progress",
|
|
39
|
+
title: "Task 3",
|
|
40
|
+
description: "Add a variant",
|
|
41
|
+
assignee_name: "Alice Jones",
|
|
42
|
+
assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
id: "4",
|
|
46
|
+
container: "To Do",
|
|
47
|
+
title: "Task 4",
|
|
48
|
+
description: "Add jest tests",
|
|
49
|
+
assignee_name: "Mike James",
|
|
50
|
+
assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
id: "5",
|
|
54
|
+
container: "Done",
|
|
55
|
+
title: "Task 5",
|
|
56
|
+
description: "Alpha testing",
|
|
57
|
+
assignee_name: "James Guy",
|
|
58
|
+
assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
id: "6",
|
|
62
|
+
container: "In Progress",
|
|
63
|
+
title: "Task 6",
|
|
64
|
+
description: "Release",
|
|
65
|
+
assignee_name: "Sally Jones",
|
|
66
|
+
assignee_img: "https://randomuser.me/api/portraits/women/28.jpg",
|
|
67
|
+
},
|
|
68
|
+
];
|
|
69
|
+
|
|
70
|
+
const DraggableMultipleContainer = (props) => {
|
|
71
|
+
const [initialState, setInitialState] = useState(data);
|
|
72
|
+
|
|
73
|
+
const badgeProperties = (container) => {
|
|
74
|
+
switch (container) {
|
|
75
|
+
case "To Do":
|
|
76
|
+
return { text: "queue", color: "warning" };
|
|
77
|
+
case "In Progress":
|
|
78
|
+
return { text: "progress", color: "primary" };
|
|
79
|
+
default:
|
|
80
|
+
return { text: "done", color: "success" };
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
return (
|
|
85
|
+
<DraggableProvider initialItems={data}
|
|
86
|
+
onChange={(items) => setInitialState(items)}
|
|
87
|
+
>
|
|
88
|
+
<Draggable
|
|
89
|
+
display="flex"
|
|
90
|
+
justifyContent="center"
|
|
91
|
+
{...props}
|
|
92
|
+
>
|
|
93
|
+
{containers?.map((container) => (
|
|
94
|
+
<Draggable.Container
|
|
95
|
+
container={container}
|
|
96
|
+
key={container}
|
|
97
|
+
padding="sm"
|
|
98
|
+
>
|
|
99
|
+
<Caption textAlign="center">{container}</Caption>
|
|
100
|
+
<Flex
|
|
101
|
+
alignItems="stretch"
|
|
102
|
+
orientation="column"
|
|
103
|
+
>
|
|
104
|
+
{initialState
|
|
105
|
+
.filter((item) => item.container === container)
|
|
106
|
+
.map(
|
|
107
|
+
({
|
|
108
|
+
assignee_img,
|
|
109
|
+
assignee_name,
|
|
110
|
+
description,
|
|
111
|
+
id,
|
|
112
|
+
title,
|
|
113
|
+
}) => (
|
|
114
|
+
<Draggable.Item
|
|
115
|
+
container={container}
|
|
116
|
+
id={id}
|
|
117
|
+
key={id}
|
|
118
|
+
>
|
|
119
|
+
<Card
|
|
120
|
+
marginBottom="sm"
|
|
121
|
+
padding="sm"
|
|
122
|
+
>
|
|
123
|
+
<Flex justify="between">
|
|
124
|
+
<FlexItem>
|
|
125
|
+
<Flex>
|
|
126
|
+
<Avatar
|
|
127
|
+
imageUrl={assignee_img}
|
|
128
|
+
name={assignee_name}
|
|
129
|
+
size="xxs"
|
|
130
|
+
/>
|
|
131
|
+
<Title paddingLeft="xs"
|
|
132
|
+
size={4}
|
|
133
|
+
text={title}
|
|
134
|
+
/>
|
|
135
|
+
</Flex>
|
|
136
|
+
</FlexItem>
|
|
137
|
+
<Badge
|
|
138
|
+
marginLeft="sm"
|
|
139
|
+
rounded
|
|
140
|
+
text={badgeProperties(container).text}
|
|
141
|
+
variant={badgeProperties(container).color}
|
|
142
|
+
/>
|
|
143
|
+
</Flex>
|
|
144
|
+
<Body paddingTop="xs"
|
|
145
|
+
text={description}
|
|
146
|
+
/>
|
|
147
|
+
</Card>
|
|
148
|
+
</Draggable.Item>
|
|
149
|
+
)
|
|
150
|
+
)}
|
|
151
|
+
</Flex>
|
|
152
|
+
</Draggable.Container>
|
|
153
|
+
))}
|
|
154
|
+
</Draggable>
|
|
155
|
+
</DraggableProvider>
|
|
156
|
+
);
|
|
157
|
+
};
|
|
158
|
+
|
|
159
|
+
export default DraggableMultipleContainer;
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import {
|
|
3
|
+
Flex,
|
|
4
|
+
Badge,
|
|
5
|
+
Title,
|
|
6
|
+
Icon,
|
|
7
|
+
Draggable,
|
|
8
|
+
DraggableProvider,
|
|
9
|
+
Card,
|
|
10
|
+
Caption,
|
|
11
|
+
} from "../../";
|
|
12
|
+
|
|
13
|
+
// Initial items to be dragged
|
|
14
|
+
const data = [
|
|
15
|
+
{
|
|
16
|
+
id: "1",
|
|
17
|
+
text: "Joe Black",
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
id: "2",
|
|
21
|
+
text: "Nancy White",
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
id: "3",
|
|
25
|
+
text: "Bill Green",
|
|
26
|
+
},
|
|
27
|
+
];
|
|
28
|
+
|
|
29
|
+
const DraggableWithCards = (props) => {
|
|
30
|
+
const [initialState, setInitialState] = useState(data);
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<DraggableProvider
|
|
34
|
+
initialItems={data}
|
|
35
|
+
onChange={(items) => setInitialState(items)}
|
|
36
|
+
>
|
|
37
|
+
<Draggable {...props}>
|
|
38
|
+
<Draggable.Container>
|
|
39
|
+
{initialState.map(({ id, text }) => (
|
|
40
|
+
<Draggable.Item id={id}
|
|
41
|
+
key={id}
|
|
42
|
+
>
|
|
43
|
+
<Card
|
|
44
|
+
highlight={{ position: "side", color: "primary" }}
|
|
45
|
+
marginBottom="xs"
|
|
46
|
+
>
|
|
47
|
+
<Flex alignItems="stretch"
|
|
48
|
+
flexDirection="column"
|
|
49
|
+
>
|
|
50
|
+
<Flex gap="xs">
|
|
51
|
+
<Title size={4}
|
|
52
|
+
text={text}
|
|
53
|
+
/>
|
|
54
|
+
<Badge
|
|
55
|
+
text="35-12345"
|
|
56
|
+
variant="primary"
|
|
57
|
+
/>
|
|
58
|
+
</Flex>
|
|
59
|
+
|
|
60
|
+
<Flex
|
|
61
|
+
gap="sm"
|
|
62
|
+
spacing="between"
|
|
63
|
+
>
|
|
64
|
+
<Caption
|
|
65
|
+
size="xs"
|
|
66
|
+
text="8:00A"
|
|
67
|
+
/>
|
|
68
|
+
<Flex gap="xxs">
|
|
69
|
+
<Caption
|
|
70
|
+
size="xs"
|
|
71
|
+
text="Township Name"
|
|
72
|
+
/>
|
|
73
|
+
<Caption size="xs"
|
|
74
|
+
text="•"
|
|
75
|
+
/>
|
|
76
|
+
<Caption size="xs"
|
|
77
|
+
text="90210"
|
|
78
|
+
/>
|
|
79
|
+
</Flex>
|
|
80
|
+
</Flex>
|
|
81
|
+
|
|
82
|
+
<Flex gap="xxs"
|
|
83
|
+
spacing="between"
|
|
84
|
+
>
|
|
85
|
+
<Flex gap="xxs">
|
|
86
|
+
<Caption color="error"
|
|
87
|
+
size="xs"
|
|
88
|
+
>
|
|
89
|
+
<Icon icon="house-circle-exclamation" />
|
|
90
|
+
</Caption>
|
|
91
|
+
<Caption color="success"
|
|
92
|
+
size="xs">
|
|
93
|
+
<Icon icon="file-circle-check" />
|
|
94
|
+
</Caption>
|
|
95
|
+
</Flex>
|
|
96
|
+
<Flex>
|
|
97
|
+
<Badge rounded
|
|
98
|
+
text="Schedule QA"
|
|
99
|
+
variant="warning"
|
|
100
|
+
/>
|
|
101
|
+
<Badge rounded
|
|
102
|
+
text="Flex"
|
|
103
|
+
variant="primary"
|
|
104
|
+
/>
|
|
105
|
+
<Badge rounded
|
|
106
|
+
text="R99"
|
|
107
|
+
variant="primary"
|
|
108
|
+
/>
|
|
109
|
+
</Flex>
|
|
110
|
+
</Flex>
|
|
111
|
+
</Flex>
|
|
112
|
+
</Card>
|
|
113
|
+
</Draggable.Item>
|
|
114
|
+
))}
|
|
115
|
+
</Draggable.Container>
|
|
116
|
+
</Draggable>
|
|
117
|
+
</DraggableProvider>
|
|
118
|
+
);
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
export default DraggableWithCards;
|
|
@@ -7,39 +7,40 @@ const TableAlignmentColumn = (props) => {
|
|
|
7
7
|
<Table
|
|
8
8
|
{...props}
|
|
9
9
|
>
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
10
|
+
<Table.Head>
|
|
11
|
+
<Table.Row>
|
|
12
|
+
<Table.Header>{'Column 1'}</Table.Header>
|
|
13
|
+
<Table.Header>{'Column 2'}</Table.Header>
|
|
14
|
+
<Table.Header>{'Column 3'}</Table.Header>
|
|
15
|
+
<Table.Header textAlign="center">{'Rating'}</Table.Header>
|
|
16
|
+
<Table.Header textAlign="right">{'Money'}</Table.Header>
|
|
17
|
+
</Table.Row>
|
|
18
|
+
</Table.Head>
|
|
19
|
+
<Table.Body>
|
|
20
|
+
<Table.Row>
|
|
21
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
22
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
23
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
24
|
+
<Table.Cell textAlign="center">{'3'}</Table.Cell>
|
|
25
|
+
<Table.Cell textAlign="right">{'$57.32'}</Table.Cell>
|
|
26
|
+
</Table.Row>
|
|
27
|
+
<Table.Row>
|
|
28
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
29
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
30
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
31
|
+
<Table.Cell textAlign="center">{'2'}</Table.Cell>
|
|
32
|
+
<Table.Cell textAlign="right">{'$5,657.08'}</Table.Cell>
|
|
33
|
+
</Table.Row>
|
|
34
|
+
<Table.Row>
|
|
35
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
36
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
37
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
38
|
+
<Table.Cell textAlign="center">{'4'}</Table.Cell>
|
|
39
|
+
<Table.Cell textAlign="right">{'$358.77'}</Table.Cell>
|
|
40
|
+
</Table.Row>
|
|
41
|
+
</Table.Body>
|
|
42
42
|
</Table>
|
|
43
|
+
|
|
43
44
|
)
|
|
44
45
|
}
|
|
45
46
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
Pass our `textAlign` global prop to any `table.cell` subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns.
|
|
2
2
|
In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned.
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
Pass our `text_align` global prop to any `table/table_cell` subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns.
|
|
2
|
+
In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned.
|
|
@@ -7,39 +7,39 @@ const TableAlignmentRow = (props) => {
|
|
|
7
7
|
<Table
|
|
8
8
|
{...props}
|
|
9
9
|
>
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
10
|
+
<Table.Head>
|
|
11
|
+
<Table.Row>
|
|
12
|
+
<Table.Header>{'Column 1'}</Table.Header>
|
|
13
|
+
<Table.Header>{'Column 2'}</Table.Header>
|
|
14
|
+
<Table.Header>{'Column 3'}</Table.Header>
|
|
15
|
+
<Table.Header>{'Column 4'}</Table.Header>
|
|
16
|
+
<Table.Header>{'Column 5'}</Table.Header>
|
|
17
|
+
</Table.Row>
|
|
18
|
+
</Table.Head>
|
|
19
|
+
<Table.Body>
|
|
20
|
+
<Table.Row>
|
|
21
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
22
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
23
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
24
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
25
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
26
|
+
</Table.Row>
|
|
27
|
+
<Table.Row textAlign="center">
|
|
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.Row>
|
|
34
|
+
<Table.Row textAlign="right">
|
|
35
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
36
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
37
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
38
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
39
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
40
|
+
</Table.Row>
|
|
41
|
+
</Table.Body>
|
|
42
|
+
</Table>
|
|
43
43
|
)
|
|
44
44
|
}
|
|
45
45
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
Pass our `textAlign` global prop to any `table.row` subcomponent to change the text alignment of all cells within that row.
|
|
2
2
|
The header/ first row is the default, followed by the second row being centered, and then the last row shifted to the right.
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<%= pb_rails("table") 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
|
+
<% end %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<%= pb_rails("table/table_body") do %>
|
|
12
|
+
<%= pb_rails("table/table_row") do %>
|
|
13
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
14
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
15
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
16
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
17
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
18
|
+
<% end %>
|
|
19
|
+
<%= pb_rails("table/table_row", props: { text_align: "center" }) do %>
|
|
20
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
21
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
22
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
23
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
24
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
25
|
+
<% end %>
|
|
26
|
+
<%= pb_rails("table/table_row", props: { text_align: "right" }) do %>
|
|
27
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
28
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
29
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
30
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
31
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
32
|
+
<% end %>
|
|
33
|
+
<% end %>
|
|
34
|
+
<% end %>
|