playbook_ui 13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2176 → 13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2178
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +2 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +58 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js +200 -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/lib/playbook/version.rb +1 -1
- metadata +4 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: af16199bf3de903780fbe8aef3da42bc2864cdbed9ef37c559bd9c6e3b823ec8
|
|
4
|
+
data.tar.gz: 3d64795bc4c41d875381d33a8303280f184fe0cc4915471f6f1cf11455ef604f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: fad31fe23e5f08b313d6e7b0d7c571c3ca20c08bd59d5e75b001009c8a2ccf2657eb84f3ac882093745458d494ca9d3d54056d83f76f06aafd6897f9c33285a4
|
|
7
|
+
data.tar.gz: f0e6431938db0f7fec379cf5c6374d89f7383a9cd6936c3b302811519c74f96fd40df04580f7a5c0c8bfb8ce889c15567ed3075f65e4d32d6e792a83b5e84140
|
|
@@ -53,6 +53,7 @@ export const TableBody = ({
|
|
|
53
53
|
const rowHasNoChildren = row.original.children && !row.original.children.length ? true : false
|
|
54
54
|
const numberOfColumns = table.getAllFlatColumns().length
|
|
55
55
|
const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0].cellAccessors?.length)
|
|
56
|
+
const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren))
|
|
56
57
|
|
|
57
58
|
return (
|
|
58
59
|
<React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
|
|
@@ -68,7 +69,7 @@ export const TableBody = ({
|
|
|
68
69
|
)}
|
|
69
70
|
|
|
70
71
|
<tr
|
|
71
|
-
className={`${
|
|
72
|
+
className={`${rowBackground ? "bg-silver" : "bg-white"} ${
|
|
72
73
|
row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
|
|
73
74
|
}`}
|
|
74
75
|
id={`${row.index}-${row.id}-${row.depth}-row`}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { AdvancedTable } from "../..";
|
|
3
|
+
import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading";
|
|
4
|
+
|
|
5
|
+
const AdvancedTableInlineRowLoading = (props) => {
|
|
6
|
+
const columnDefinitions = [
|
|
7
|
+
{
|
|
8
|
+
accessor: "year",
|
|
9
|
+
label: "Year",
|
|
10
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
accessor: "newEnrollments",
|
|
14
|
+
label: "New Enrollments",
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
accessor: "scheduledMeetings",
|
|
18
|
+
label: "Scheduled Meetings",
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
accessor: "attendanceRate",
|
|
22
|
+
label: "Attendance Rate",
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
accessor: "completedClasses",
|
|
26
|
+
label: "Completed Classes",
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
accessor: "classCompletionRate",
|
|
30
|
+
label: "Class Completion Rate",
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
accessor: "graduatedStudents",
|
|
34
|
+
label: "Graduated Students",
|
|
35
|
+
},
|
|
36
|
+
];
|
|
37
|
+
|
|
38
|
+
//Render the subRow header rows
|
|
39
|
+
const subRowHeaders = ["Quarter", "Month", "Day"]
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
return (
|
|
43
|
+
<div>
|
|
44
|
+
<AdvancedTable
|
|
45
|
+
columnDefinitions={columnDefinitions}
|
|
46
|
+
enableToggleExpansion="all"
|
|
47
|
+
inlineRowLoading
|
|
48
|
+
tableData={MOCK_DATA_INLINE_LOADING}
|
|
49
|
+
{...props}
|
|
50
|
+
>
|
|
51
|
+
<AdvancedTable.Header />
|
|
52
|
+
<AdvancedTable.Body subRowHeaders={subRowHeaders}/>
|
|
53
|
+
</AdvancedTable>
|
|
54
|
+
</div>
|
|
55
|
+
);
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
export default AdvancedTableInlineRowLoading;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
As a default, the kit assumes that the dataset provided to it at first render is the complete dataset and renders the row level expansion buttons, the toggleAllExpansion buttons in the subrow headers (if any), etc based on that dataset. However, if the dev wants to set up a more complicated querying logic that for instance, runs a query on each expansion button click, then they can use the `inlineRowLoading` prop. This prop, if present, assumes that any item in the dataset that has an empty children array WILL have children even if it does not have any on first render. The kit therefore renders the correct buttons as well as adding an inline Loading state for the row with that empty children array.
|
|
2
|
+
|
|
3
|
+
In this code example, 2021 has an empty children array. Toggle it open to see the inline loading state. Once the correct data loads, this state will be replaced with the correct data rows.
|
|
4
|
+
|
|
5
|
+
This prop is set to `false` by default.
|
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
export const MOCK_DATA_INLINE_LOADING = [
|
|
2
|
+
{
|
|
3
|
+
year: "2021",
|
|
4
|
+
quarter: null,
|
|
5
|
+
month: null,
|
|
6
|
+
day: null,
|
|
7
|
+
newEnrollments: "20",
|
|
8
|
+
scheduledMeetings: "10",
|
|
9
|
+
attendanceRate: "51%",
|
|
10
|
+
completedClasses: "3",
|
|
11
|
+
classCompletionRate: "33%",
|
|
12
|
+
graduatedStudents: "19",
|
|
13
|
+
children: [],
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
year: "2022",
|
|
17
|
+
quarter: null,
|
|
18
|
+
month: null,
|
|
19
|
+
day: null,
|
|
20
|
+
newEnrollments: "25",
|
|
21
|
+
scheduledMeetings: "17",
|
|
22
|
+
attendanceRate: "75%",
|
|
23
|
+
completedClasses: "5",
|
|
24
|
+
classCompletionRate: "45%",
|
|
25
|
+
graduatedStudents: "32",
|
|
26
|
+
children: [
|
|
27
|
+
{
|
|
28
|
+
year: "2022",
|
|
29
|
+
quarter: "Q1",
|
|
30
|
+
month: null,
|
|
31
|
+
day: null,
|
|
32
|
+
newEnrollments: "2",
|
|
33
|
+
scheduledMeetings: "35",
|
|
34
|
+
attendanceRate: "32%",
|
|
35
|
+
completedClasses: "15",
|
|
36
|
+
classCompletionRate: "52%",
|
|
37
|
+
graduatedStudents: "36",
|
|
38
|
+
children: [
|
|
39
|
+
{
|
|
40
|
+
year: "2022",
|
|
41
|
+
quarter: "Q1",
|
|
42
|
+
month: "January",
|
|
43
|
+
day: null,
|
|
44
|
+
newEnrollments: "16",
|
|
45
|
+
scheduledMeetings: "20",
|
|
46
|
+
attendanceRate: "11%",
|
|
47
|
+
completedClasses: "13",
|
|
48
|
+
classCompletionRate: "47%",
|
|
49
|
+
graduatedStudents: "28",
|
|
50
|
+
children: [
|
|
51
|
+
{
|
|
52
|
+
year: "2022",
|
|
53
|
+
quarter: "Q1",
|
|
54
|
+
month: "January",
|
|
55
|
+
day: "15",
|
|
56
|
+
newEnrollments: "34",
|
|
57
|
+
scheduledMeetings: "28",
|
|
58
|
+
attendanceRate: "97%",
|
|
59
|
+
completedClasses: "20",
|
|
60
|
+
classCompletionRate: "15%",
|
|
61
|
+
graduatedStudents: "17",
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
year: "2022",
|
|
65
|
+
quarter: "Q1",
|
|
66
|
+
month: "January",
|
|
67
|
+
day: "25",
|
|
68
|
+
newEnrollments: "43",
|
|
69
|
+
scheduledMeetings: "23",
|
|
70
|
+
attendanceRate: "66%",
|
|
71
|
+
completedClasses: "26",
|
|
72
|
+
classCompletionRate: "47%",
|
|
73
|
+
graduatedStudents: "9",
|
|
74
|
+
},
|
|
75
|
+
],
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
year: "2022",
|
|
79
|
+
quarter: "Q1",
|
|
80
|
+
month: "May",
|
|
81
|
+
day: null,
|
|
82
|
+
newEnrollments: "20",
|
|
83
|
+
scheduledMeetings: "41",
|
|
84
|
+
attendanceRate: "95%",
|
|
85
|
+
completedClasses: "26",
|
|
86
|
+
classCompletionRate: "83%",
|
|
87
|
+
graduatedStudents: "43",
|
|
88
|
+
children: [
|
|
89
|
+
{
|
|
90
|
+
year: "2011",
|
|
91
|
+
quarter: "Q1",
|
|
92
|
+
month: "May",
|
|
93
|
+
day: "2",
|
|
94
|
+
newEnrollments: "19",
|
|
95
|
+
scheduledMeetings: "35",
|
|
96
|
+
attendanceRate: "69%",
|
|
97
|
+
completedClasses: "8",
|
|
98
|
+
classCompletionRate: "75%",
|
|
99
|
+
graduatedStudents: "23",
|
|
100
|
+
},
|
|
101
|
+
],
|
|
102
|
+
},
|
|
103
|
+
],
|
|
104
|
+
},
|
|
105
|
+
],
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
year: "2023",
|
|
109
|
+
quarter: null,
|
|
110
|
+
month: null,
|
|
111
|
+
day: null,
|
|
112
|
+
newEnrollments: "10",
|
|
113
|
+
scheduledMeetings: "15",
|
|
114
|
+
attendanceRate: "65%",
|
|
115
|
+
completedClasses: "4",
|
|
116
|
+
classCompletionRate: "49%",
|
|
117
|
+
graduatedStudents: "29",
|
|
118
|
+
children: [
|
|
119
|
+
{
|
|
120
|
+
year: "2023",
|
|
121
|
+
quarter: "Q1",
|
|
122
|
+
month: null,
|
|
123
|
+
day: null,
|
|
124
|
+
newEnrollments: "2",
|
|
125
|
+
scheduledMeetings: "35",
|
|
126
|
+
attendanceRate: "32%",
|
|
127
|
+
completedClasses: "15",
|
|
128
|
+
classCompletionRate: "52%",
|
|
129
|
+
graduatedStudents: "36",
|
|
130
|
+
children: [
|
|
131
|
+
{
|
|
132
|
+
year: "2023",
|
|
133
|
+
quarter: "Q1",
|
|
134
|
+
month: "March",
|
|
135
|
+
day: null,
|
|
136
|
+
newEnrollments: "16",
|
|
137
|
+
scheduledMeetings: "20",
|
|
138
|
+
attendanceRate: "11%",
|
|
139
|
+
completedClasses: "13",
|
|
140
|
+
classCompletionRate: "47%",
|
|
141
|
+
graduatedStudents: "28",
|
|
142
|
+
children: [
|
|
143
|
+
{
|
|
144
|
+
year: "2023",
|
|
145
|
+
quarter: "Q1",
|
|
146
|
+
month: "March",
|
|
147
|
+
day: "10",
|
|
148
|
+
newEnrollments: "34",
|
|
149
|
+
scheduledMeetings: "28",
|
|
150
|
+
attendanceRate: "97%",
|
|
151
|
+
completedClasses: "20",
|
|
152
|
+
classCompletionRate: "15%",
|
|
153
|
+
graduatedStudents: "17",
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
year: "2023",
|
|
157
|
+
quarter: "Q1",
|
|
158
|
+
month: "March",
|
|
159
|
+
day: "11",
|
|
160
|
+
newEnrollments: "43",
|
|
161
|
+
scheduledMeetings: "23",
|
|
162
|
+
attendanceRate: "66%",
|
|
163
|
+
completedClasses: "26",
|
|
164
|
+
classCompletionRate: "47%",
|
|
165
|
+
graduatedStudents: "9",
|
|
166
|
+
},
|
|
167
|
+
],
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
year: "2023",
|
|
171
|
+
quarter: "Q1",
|
|
172
|
+
month: "April",
|
|
173
|
+
day: null,
|
|
174
|
+
newEnrollments: "20",
|
|
175
|
+
scheduledMeetings: "41",
|
|
176
|
+
attendanceRate: "95%",
|
|
177
|
+
completedClasses: "26",
|
|
178
|
+
classCompletionRate: "83%",
|
|
179
|
+
graduatedStudents: "43",
|
|
180
|
+
children: [
|
|
181
|
+
{
|
|
182
|
+
year: "2023",
|
|
183
|
+
quarter: "Q1",
|
|
184
|
+
month: "April",
|
|
185
|
+
day: "15",
|
|
186
|
+
newEnrollments: "19",
|
|
187
|
+
scheduledMeetings: "35",
|
|
188
|
+
attendanceRate: "69%",
|
|
189
|
+
completedClasses: "8",
|
|
190
|
+
classCompletionRate: "75%",
|
|
191
|
+
graduatedStudents: "23",
|
|
192
|
+
},
|
|
193
|
+
],
|
|
194
|
+
},
|
|
195
|
+
],
|
|
196
|
+
},
|
|
197
|
+
],
|
|
198
|
+
},
|
|
199
|
+
];
|
|
200
|
+
|
|
@@ -7,3 +7,4 @@ export { default as AdvancedTableSubrowHeaders } from './_advanced_table_subrow_
|
|
|
7
7
|
export { default as AdvancedTableCollapsibleTrail } from './_advanced_table_collapsible_trail.jsx'
|
|
8
8
|
export { default as AdvancedTableTableOptions } from './_advanced_table_table_options.jsx'
|
|
9
9
|
export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
|
|
10
|
+
export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 13.18.0.pre.alpha.
|
|
4
|
+
version: 13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2178
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -293,6 +293,8 @@ files:
|
|
|
293
293
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
|
|
294
294
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
|
|
295
295
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
|
|
296
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx
|
|
297
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md
|
|
296
298
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx
|
|
297
299
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md
|
|
298
300
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx
|
|
@@ -307,6 +309,7 @@ files:
|
|
|
307
309
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.md
|
|
308
310
|
- app/pb_kits/playbook/pb_advanced_table/docs/_description.md
|
|
309
311
|
- app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js
|
|
312
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
|
|
310
313
|
- app/pb_kits/playbook/pb_advanced_table/docs/example.yml
|
|
311
314
|
- app/pb_kits/playbook/pb_advanced_table/docs/index.js
|
|
312
315
|
- app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss
|