playbook_ui_docs 14.24.0.pre.rc.0 → 14.24.0.pre.rc.1
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_with_custom_header_multi_header.jsx +107 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md +2 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +1 -0
- data/dist/playbook-doc.js +1 -1
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 9bae4ca073aa30aa962adccf4a4960c95c2326cf1032ced8fc33d2b49dbd3620
|
|
4
|
+
data.tar.gz: 4a3838eda081faa94b875d4efbb2edb3512837917c1e37d049f07625d74e1df3
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ee4c02cb6637b42ddf7ac4ecbf327633ef144e0606c6b39de7203388b0bebafbdf41d1abd78f61bbef111f1dc46c5f61d989ee52958b3559b9eed2103c85db66
|
|
7
|
+
data.tar.gz: 7b78cfc2742bcc17c3b16f9b93e5d76dd9fc51c6199972602f26d7acd2ddcc0719089baab640ac4fc78c68e62c386700536b4b943f592737775b3619034890b9
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.jsx
ADDED
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import AdvancedTable from '../../pb_advanced_table/_advanced_table'
|
|
3
|
+
import Icon from "../../pb_icon/_icon"
|
|
4
|
+
import Flex from "../../pb_flex/_flex"
|
|
5
|
+
import Caption from "../../pb_caption/_caption"
|
|
6
|
+
import Tooltip from "../../pb_tooltip/_tooltip"
|
|
7
|
+
import MOCK_DATA from "./advanced_table_mock_data.json"
|
|
8
|
+
|
|
9
|
+
const AdvancedTableWithCustomHeaderMultiHeader = (props) => {
|
|
10
|
+
|
|
11
|
+
const columnDefinitions = [
|
|
12
|
+
{
|
|
13
|
+
accessor: "year",
|
|
14
|
+
label: "Year",
|
|
15
|
+
id: "year",
|
|
16
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
label: "Enrollment Data",
|
|
20
|
+
id: "enrollmentData",
|
|
21
|
+
header: () => (
|
|
22
|
+
<Flex alignItems="center"
|
|
23
|
+
justifyContent="center"
|
|
24
|
+
>
|
|
25
|
+
<Caption marginRight="xs">Enrollments Data</Caption>
|
|
26
|
+
<Tooltip placement="top"
|
|
27
|
+
text="Whoa. I'm a Tooltip"
|
|
28
|
+
zIndex={10}
|
|
29
|
+
>
|
|
30
|
+
<Icon cursor="pointer"
|
|
31
|
+
icon="info"
|
|
32
|
+
size="xs"
|
|
33
|
+
/>
|
|
34
|
+
</Tooltip>
|
|
35
|
+
</Flex>
|
|
36
|
+
),
|
|
37
|
+
columns: [
|
|
38
|
+
{
|
|
39
|
+
label: "Enrollment Stats",
|
|
40
|
+
id: "enrollmentStats",
|
|
41
|
+
columns: [
|
|
42
|
+
{
|
|
43
|
+
accessor: "newEnrollments",
|
|
44
|
+
id: "newEnrollments",
|
|
45
|
+
label: "New Enrollments",
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
accessor: "scheduledMeetings",
|
|
49
|
+
id: "scheduledMeetings",
|
|
50
|
+
label: "Scheduled Meetings",
|
|
51
|
+
},
|
|
52
|
+
],
|
|
53
|
+
},
|
|
54
|
+
],
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
label: "Performance Data",
|
|
58
|
+
id: "performanceData",
|
|
59
|
+
columns: [
|
|
60
|
+
{
|
|
61
|
+
label: "Completion Metrics",
|
|
62
|
+
id: "completionMetrics",
|
|
63
|
+
columns: [
|
|
64
|
+
{
|
|
65
|
+
accessor: "completedClasses",
|
|
66
|
+
label: "Completed Classes",
|
|
67
|
+
id: "completedClasses",
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
accessor: "classCompletionRate",
|
|
71
|
+
label: "Class Completion Rate",
|
|
72
|
+
id: "classCompletionRate",
|
|
73
|
+
},
|
|
74
|
+
],
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
label: "Attendance",
|
|
78
|
+
id: "attendance",
|
|
79
|
+
columns: [
|
|
80
|
+
{
|
|
81
|
+
accessor: "attendanceRate",
|
|
82
|
+
label: "Attendance Rate",
|
|
83
|
+
id: "attendanceRate",
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
accessor: "scheduledMeetings",
|
|
87
|
+
label: "Scheduled Meetings",
|
|
88
|
+
id: "scheduledMeetings",
|
|
89
|
+
},
|
|
90
|
+
],
|
|
91
|
+
},
|
|
92
|
+
],
|
|
93
|
+
},
|
|
94
|
+
];
|
|
95
|
+
|
|
96
|
+
return (
|
|
97
|
+
<div>
|
|
98
|
+
<AdvancedTable
|
|
99
|
+
columnDefinitions={columnDefinitions}
|
|
100
|
+
tableData={MOCK_DATA}
|
|
101
|
+
{...props}
|
|
102
|
+
/>
|
|
103
|
+
</div>
|
|
104
|
+
)
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
export default AdvancedTableWithCustomHeaderMultiHeader;
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.md
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The optional `header` key/value pair within `columnDefinitions` can also be used with multi headers as seen here.
|
|
@@ -43,6 +43,7 @@ examples:
|
|
|
43
43
|
- advanced_table_responsive: Responsive Tables
|
|
44
44
|
- advanced_table_custom_cell: Custom Components for Cells
|
|
45
45
|
- advanced_table_with_custom_header: Custom Header Cell
|
|
46
|
+
- advanced_table_with_custom_header_multi_header: Custom Header with Multiple Headers
|
|
46
47
|
- advanced_table_pagination: Pagination
|
|
47
48
|
- advanced_table_pagination_with_props: Pagination Props
|
|
48
49
|
- advanced_table_loading: Loading State
|
|
@@ -40,3 +40,4 @@ export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_
|
|
|
40
40
|
export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'
|
|
41
41
|
export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'
|
|
42
42
|
export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'
|
|
43
|
+
export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced_table_with_custom_header_multi_header.jsx'
|
|
@@ -9,10 +9,10 @@
|
|
|
9
9
|
<tr>
|
|
10
10
|
<th>
|
|
11
11
|
<%= pb_rails("checkbox", props: {
|
|
12
|
-
text: "Uncheck All",
|
|
13
12
|
value: "checkbox-value",
|
|
14
13
|
name: "main-checkbox",
|
|
15
14
|
indeterminate_main: true,
|
|
15
|
+
indeterminate_main_labels: ["Check All Ice Cream", "Uncheck All Ice Cream"],
|
|
16
16
|
id: "indeterminate-checkbox"
|
|
17
17
|
}) %>
|
|
18
18
|
</th>
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.
|
|
1
|
+
If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.
|
|
2
|
+
If you want to customize the main checkbox labels, set an array `indeterminate_main_labels` with "Check All" and "Uncheck All" labels.
|