playbook_ui 15.2.0.pre.alpha.PLAY2589advancedtableinlinerowloadingtoggleicon11641 → 15.2.0.pre.alpha.PLAY2589advancedtableinlinerowloadingtoggleicon11644
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/Components/TableHeaderCell.tsx +3 -3
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +3 -3
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +3 -3
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +16 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +11 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading_empty_children.js +0 -160
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -2
- data/dist/chunks/{_weekday_stacked-B_Uc7-rO.js → _weekday_stacked-BQrF2byq.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +2 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_show_toggle.jsx +0 -59
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_show_toggle.md +0 -5
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 89693ba1bf07627064652227df87422a5b6126af238967ceb09282f01f6d7e49
|
|
4
|
+
data.tar.gz: 667090ab12ab761b0bf84a8365bfb6d5dd31b5cdff7274583bfd620a864e4dee
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 7dd13b4e5110a7f0129d60c3fc5661b8523bbcb28f8ca42d18864acdba620fd361a03754ae7a1eebac3e26d4043e897c5313168e282fea640da11f7bf37900cf
|
|
7
|
+
data.tar.gz: 7520b324d9a37fc5463adefa742e571d41c64089f3e989829a3de42bb27f930befbee03f1fbc3dda32eb63652acf21cf8213911a400ef1aa553b02b7bff7996b
|
|
@@ -30,7 +30,7 @@ type TableHeaderCellProps = {
|
|
|
30
30
|
headerChildren?: React.ReactNode | React.ReactNode[]
|
|
31
31
|
isPinnedLeft?: boolean
|
|
32
32
|
loading?: boolean
|
|
33
|
-
|
|
33
|
+
persistToggleExpansionButton?: boolean
|
|
34
34
|
sortIcon?: string | string[]
|
|
35
35
|
table?: Table<GenericObject>
|
|
36
36
|
} & GlobalProps
|
|
@@ -59,7 +59,7 @@ export const TableHeaderCell = ({
|
|
|
59
59
|
selectableRows,
|
|
60
60
|
hasAnySubRows,
|
|
61
61
|
showActionsBar,
|
|
62
|
-
|
|
62
|
+
persistToggleExpansionButton,
|
|
63
63
|
stickyLeftColumn,
|
|
64
64
|
inlineRowLoading,
|
|
65
65
|
isActionBarVisible,
|
|
@@ -222,7 +222,7 @@ const isToggleExpansionEnabled =
|
|
|
222
222
|
/>
|
|
223
223
|
)
|
|
224
224
|
}
|
|
225
|
-
{isToggleExpansionEnabled && ((hasAnySubRows) || (inlineRowLoading &&
|
|
225
|
+
{isToggleExpansionEnabled && ((hasAnySubRows) || (inlineRowLoading && persistToggleExpansionButton)) && !expandByDepth && (
|
|
226
226
|
<ToggleIconButton onClick={handleExpandOrCollapse} />
|
|
227
227
|
)}
|
|
228
228
|
{isToggleExpansionEnabled && hasAnySubRows && expandByDepth && (
|
|
@@ -39,7 +39,7 @@ export const TableHeader = ({
|
|
|
39
39
|
hasAnySubRows,
|
|
40
40
|
showActionsBar,
|
|
41
41
|
selectableRows,
|
|
42
|
-
|
|
42
|
+
persistToggleExpansionButton,
|
|
43
43
|
responsive,
|
|
44
44
|
headerRef,
|
|
45
45
|
virtualizedRows,
|
|
@@ -93,7 +93,7 @@ export const TableHeader = ({
|
|
|
93
93
|
isPinnedLeft={isPinnedLeft}
|
|
94
94
|
key={`${header.id}-header`}
|
|
95
95
|
loading={loading}
|
|
96
|
-
|
|
96
|
+
persistToggleExpansionButton={persistToggleExpansionButton}
|
|
97
97
|
sortIcon={sortIcon}
|
|
98
98
|
table={table}
|
|
99
99
|
/>
|
|
@@ -138,7 +138,7 @@ export const TableHeader = ({
|
|
|
138
138
|
isVirtualized
|
|
139
139
|
key={`${header.id}-header-virtualized`}
|
|
140
140
|
loading={loading}
|
|
141
|
-
|
|
141
|
+
persistToggleExpansionButton={persistToggleExpansionButton}
|
|
142
142
|
sortIcon={sortIcon}
|
|
143
143
|
table={table}
|
|
144
144
|
/>
|
|
@@ -63,7 +63,7 @@ type AdvancedTableProps = {
|
|
|
63
63
|
scrollBarNone?: boolean,
|
|
64
64
|
selectableRows?: boolean,
|
|
65
65
|
showActionsBar?: boolean,
|
|
66
|
-
|
|
66
|
+
persistToggleExpansionButton?: boolean,
|
|
67
67
|
sortControl?: GenericObject
|
|
68
68
|
tableData: GenericObject[]
|
|
69
69
|
tableOptions?: GenericObject
|
|
@@ -110,7 +110,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
|
110
110
|
scrollBarNone= false,
|
|
111
111
|
showActionsBar = true,
|
|
112
112
|
selectableRows,
|
|
113
|
-
|
|
113
|
+
persistToggleExpansionButton = false,
|
|
114
114
|
sortControl,
|
|
115
115
|
stickyLeftColumn,
|
|
116
116
|
tableData,
|
|
@@ -351,13 +351,13 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
|
351
351
|
loading={loading}
|
|
352
352
|
onCustomSortClick={onCustomSortClick}
|
|
353
353
|
onExpandByDepthClick={onExpandByDepthClick}
|
|
354
|
+
persistToggleExpansionButton={persistToggleExpansionButton}
|
|
354
355
|
pinnedRows={pinnedRows}
|
|
355
356
|
responsive={responsive}
|
|
356
357
|
rowStyling={rowStyling}
|
|
357
358
|
selectableRows={selectableRows}
|
|
358
359
|
setExpanded={setExpanded}
|
|
359
360
|
showActionsBar={showActionsBar}
|
|
360
|
-
showToggleWithInlineRowLoading={showToggleWithInlineRowLoading}
|
|
361
361
|
sortControl={sortControl}
|
|
362
362
|
stickyLeftColumn={stickyLeftColumn}
|
|
363
363
|
subRowHeaders={tableOptions?.subRowHeaders}
|
|
@@ -551,14 +551,14 @@ test("inlineRowLoading prop renders inline loading if true", () => {
|
|
|
551
551
|
expect(inlineLoading).toBeInTheDocument()
|
|
552
552
|
})
|
|
553
553
|
|
|
554
|
-
test("
|
|
554
|
+
test("persistToggleExpansionButton prop shows header toggle when inlineRowLoading is true", () => {
|
|
555
555
|
render(
|
|
556
556
|
<AdvancedTable
|
|
557
557
|
columnDefinitions={columnDefinitions}
|
|
558
558
|
data={{ testid: testId }}
|
|
559
559
|
enableToggleExpansion="all"
|
|
560
560
|
inlineRowLoading
|
|
561
|
-
|
|
561
|
+
persistToggleExpansionButton
|
|
562
562
|
tableData={MOCK_DATA_NO_SUBROWS}
|
|
563
563
|
/>
|
|
564
564
|
)
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import React from "react"
|
|
2
2
|
import AdvancedTable from '../../pb_advanced_table/_advanced_table'
|
|
3
|
+
import Caption from '../../pb_caption/_caption'
|
|
3
4
|
import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading"
|
|
5
|
+
import { MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN } from "./_mock_data_inline_loading_empty_children"
|
|
4
6
|
|
|
5
7
|
const AdvancedTableInlineRowLoading = (props) => {
|
|
6
8
|
const columnDefinitions = [
|
|
@@ -41,16 +43,30 @@ const AdvancedTableInlineRowLoading = (props) => {
|
|
|
41
43
|
|
|
42
44
|
return (
|
|
43
45
|
<div>
|
|
46
|
+
<Caption>Inline Row Loading</Caption>
|
|
44
47
|
<AdvancedTable
|
|
45
48
|
columnDefinitions={columnDefinitions}
|
|
46
49
|
enableToggleExpansion="all"
|
|
47
50
|
inlineRowLoading
|
|
51
|
+
marginBottom="md"
|
|
48
52
|
tableData={MOCK_DATA_INLINE_LOADING}
|
|
49
53
|
{...props}
|
|
50
54
|
>
|
|
51
55
|
<AdvancedTable.Header />
|
|
52
56
|
<AdvancedTable.Body subRowHeaders={subRowHeaders}/>
|
|
53
57
|
</AdvancedTable>
|
|
58
|
+
<Caption>Inline Row Loading with Persist Toggle Expansion Button</Caption>
|
|
59
|
+
<AdvancedTable
|
|
60
|
+
columnDefinitions={columnDefinitions}
|
|
61
|
+
enableToggleExpansion="all"
|
|
62
|
+
inlineRowLoading
|
|
63
|
+
persistToggleExpansionButton
|
|
64
|
+
tableData={MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN}
|
|
65
|
+
{...props}
|
|
66
|
+
>
|
|
67
|
+
<AdvancedTable.Header />
|
|
68
|
+
<AdvancedTable.Body subRowHeaders={subRowHeaders}/>
|
|
69
|
+
</AdvancedTable>
|
|
54
70
|
</div>
|
|
55
71
|
)
|
|
56
72
|
}
|
|
@@ -1,5 +1,14 @@
|
|
|
1
|
+
### inlineRowLoading
|
|
1
2
|
As a default, the kit assumes that the initial dataset is complete, and it renders all expansion buttons/controls based on that data; if no children are present, no expansion controls are rendered. If, however, you want to change the initial dataset to omit some or all of its children (to improve load times of a complex dataset, perhaps), and you implement a querying logic that loads children only when its parent is expanded, then you must use the `inlineRowLoading` prop to ensure your expansion controls are rendered even though your child data is not yet loaded. You must also pass an empty `children` array to any node that will have children to ensure its parent maintains its ability to expand. If this prop is called AND your data contains empty `children` arrays, the kit will render expansion controls on any row with empty children, and then add an inline loading state within the expanded subrow until those child row(s) are returned to the page [by your query logic].
|
|
2
3
|
|
|
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
|
+
In the first Advanced Table 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
|
|
|
5
|
-
This prop is set to `false` by default.
|
|
6
|
+
This prop is set to `false` by default.
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### persistToggleExpansion
|
|
10
|
+
The `persistToggleExpansionButton` is a boolean prop that renders the toggle-all icon in the top left header cell for complex datasets with empty `children` arrays and advanced querying logic explained in the preceeding doc example. Your logic may require an additional query helper file to update data specifically from requerying via toggle all buttons.
|
|
11
|
+
|
|
12
|
+
In the second Advanced Table in this code example, all 3 rows have empty children arrays. The toggle all button would not render (prior to an initial row expansion) without `persistToggleExpansionButton` in place.
|
|
13
|
+
|
|
14
|
+
This prop is set to false by default and should only be used in conjunction with `inlineRowLoading`.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading_empty_children.js
CHANGED
|
@@ -24,86 +24,6 @@ export const MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN = [
|
|
|
24
24
|
classCompletionRate: "45%",
|
|
25
25
|
graduatedStudents: "32",
|
|
26
26
|
children: [],
|
|
27
|
-
// children: [
|
|
28
|
-
// {
|
|
29
|
-
// year: "2022",
|
|
30
|
-
// quarter: "Q1",
|
|
31
|
-
// month: null,
|
|
32
|
-
// day: null,
|
|
33
|
-
// newEnrollments: "2",
|
|
34
|
-
// scheduledMeetings: "35",
|
|
35
|
-
// attendanceRate: "32%",
|
|
36
|
-
// completedClasses: "15",
|
|
37
|
-
// classCompletionRate: "52%",
|
|
38
|
-
// graduatedStudents: "36",
|
|
39
|
-
// children: [
|
|
40
|
-
// {
|
|
41
|
-
// year: "2022",
|
|
42
|
-
// quarter: "Q1",
|
|
43
|
-
// month: "January",
|
|
44
|
-
// day: null,
|
|
45
|
-
// newEnrollments: "16",
|
|
46
|
-
// scheduledMeetings: "20",
|
|
47
|
-
// attendanceRate: "11%",
|
|
48
|
-
// completedClasses: "13",
|
|
49
|
-
// classCompletionRate: "47%",
|
|
50
|
-
// graduatedStudents: "28",
|
|
51
|
-
// children: [
|
|
52
|
-
// {
|
|
53
|
-
// year: "2022",
|
|
54
|
-
// quarter: "Q1",
|
|
55
|
-
// month: "January",
|
|
56
|
-
// day: "15",
|
|
57
|
-
// newEnrollments: "34",
|
|
58
|
-
// scheduledMeetings: "28",
|
|
59
|
-
// attendanceRate: "97%",
|
|
60
|
-
// completedClasses: "20",
|
|
61
|
-
// classCompletionRate: "15%",
|
|
62
|
-
// graduatedStudents: "17",
|
|
63
|
-
// },
|
|
64
|
-
// {
|
|
65
|
-
// year: "2022",
|
|
66
|
-
// quarter: "Q1",
|
|
67
|
-
// month: "January",
|
|
68
|
-
// day: "25",
|
|
69
|
-
// newEnrollments: "43",
|
|
70
|
-
// scheduledMeetings: "23",
|
|
71
|
-
// attendanceRate: "66%",
|
|
72
|
-
// completedClasses: "26",
|
|
73
|
-
// classCompletionRate: "47%",
|
|
74
|
-
// graduatedStudents: "9",
|
|
75
|
-
// },
|
|
76
|
-
// ],
|
|
77
|
-
// },
|
|
78
|
-
// {
|
|
79
|
-
// year: "2022",
|
|
80
|
-
// quarter: "Q1",
|
|
81
|
-
// month: "May",
|
|
82
|
-
// day: null,
|
|
83
|
-
// newEnrollments: "20",
|
|
84
|
-
// scheduledMeetings: "41",
|
|
85
|
-
// attendanceRate: "95%",
|
|
86
|
-
// completedClasses: "26",
|
|
87
|
-
// classCompletionRate: "83%",
|
|
88
|
-
// graduatedStudents: "43",
|
|
89
|
-
// children: [
|
|
90
|
-
// {
|
|
91
|
-
// year: "2011",
|
|
92
|
-
// quarter: "Q1",
|
|
93
|
-
// month: "May",
|
|
94
|
-
// day: "2",
|
|
95
|
-
// newEnrollments: "19",
|
|
96
|
-
// scheduledMeetings: "35",
|
|
97
|
-
// attendanceRate: "69%",
|
|
98
|
-
// completedClasses: "8",
|
|
99
|
-
// classCompletionRate: "75%",
|
|
100
|
-
// graduatedStudents: "23",
|
|
101
|
-
// },
|
|
102
|
-
// ],
|
|
103
|
-
// },
|
|
104
|
-
// ],
|
|
105
|
-
// },
|
|
106
|
-
// ],
|
|
107
27
|
},
|
|
108
28
|
{
|
|
109
29
|
year: "2023",
|
|
@@ -117,86 +37,6 @@ export const MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN = [
|
|
|
117
37
|
classCompletionRate: "49%",
|
|
118
38
|
graduatedStudents: "29",
|
|
119
39
|
children: [],
|
|
120
|
-
// children: [
|
|
121
|
-
// {
|
|
122
|
-
// year: "2023",
|
|
123
|
-
// quarter: "Q1",
|
|
124
|
-
// month: null,
|
|
125
|
-
// day: null,
|
|
126
|
-
// newEnrollments: "2",
|
|
127
|
-
// scheduledMeetings: "35",
|
|
128
|
-
// attendanceRate: "32%",
|
|
129
|
-
// completedClasses: "15",
|
|
130
|
-
// classCompletionRate: "52%",
|
|
131
|
-
// graduatedStudents: "36",
|
|
132
|
-
// children: [
|
|
133
|
-
// {
|
|
134
|
-
// year: "2023",
|
|
135
|
-
// quarter: "Q1",
|
|
136
|
-
// month: "March",
|
|
137
|
-
// day: null,
|
|
138
|
-
// newEnrollments: "16",
|
|
139
|
-
// scheduledMeetings: "20",
|
|
140
|
-
// attendanceRate: "11%",
|
|
141
|
-
// completedClasses: "13",
|
|
142
|
-
// classCompletionRate: "47%",
|
|
143
|
-
// graduatedStudents: "28",
|
|
144
|
-
// children: [
|
|
145
|
-
// {
|
|
146
|
-
// year: "2023",
|
|
147
|
-
// quarter: "Q1",
|
|
148
|
-
// month: "March",
|
|
149
|
-
// day: "10",
|
|
150
|
-
// newEnrollments: "34",
|
|
151
|
-
// scheduledMeetings: "28",
|
|
152
|
-
// attendanceRate: "97%",
|
|
153
|
-
// completedClasses: "20",
|
|
154
|
-
// classCompletionRate: "15%",
|
|
155
|
-
// graduatedStudents: "17",
|
|
156
|
-
// },
|
|
157
|
-
// {
|
|
158
|
-
// year: "2023",
|
|
159
|
-
// quarter: "Q1",
|
|
160
|
-
// month: "March",
|
|
161
|
-
// day: "11",
|
|
162
|
-
// newEnrollments: "43",
|
|
163
|
-
// scheduledMeetings: "23",
|
|
164
|
-
// attendanceRate: "66%",
|
|
165
|
-
// completedClasses: "26",
|
|
166
|
-
// classCompletionRate: "47%",
|
|
167
|
-
// graduatedStudents: "9",
|
|
168
|
-
// },
|
|
169
|
-
// ],
|
|
170
|
-
// },
|
|
171
|
-
// {
|
|
172
|
-
// year: "2023",
|
|
173
|
-
// quarter: "Q1",
|
|
174
|
-
// month: "April",
|
|
175
|
-
// day: null,
|
|
176
|
-
// newEnrollments: "20",
|
|
177
|
-
// scheduledMeetings: "41",
|
|
178
|
-
// attendanceRate: "95%",
|
|
179
|
-
// completedClasses: "26",
|
|
180
|
-
// classCompletionRate: "83%",
|
|
181
|
-
// graduatedStudents: "43",
|
|
182
|
-
// children: [
|
|
183
|
-
// {
|
|
184
|
-
// year: "2023",
|
|
185
|
-
// quarter: "Q1",
|
|
186
|
-
// month: "April",
|
|
187
|
-
// day: "15",
|
|
188
|
-
// newEnrollments: "19",
|
|
189
|
-
// scheduledMeetings: "35",
|
|
190
|
-
// attendanceRate: "69%",
|
|
191
|
-
// completedClasses: "8",
|
|
192
|
-
// classCompletionRate: "75%",
|
|
193
|
-
// graduatedStudents: "23",
|
|
194
|
-
// },
|
|
195
|
-
// ],
|
|
196
|
-
// },
|
|
197
|
-
// ],
|
|
198
|
-
// },
|
|
199
|
-
// ],
|
|
200
40
|
},
|
|
201
41
|
]
|
|
202
42
|
|
|
@@ -54,7 +54,6 @@ examples:
|
|
|
54
54
|
- advanced_table_pagination_with_props: Pagination Props
|
|
55
55
|
- advanced_table_loading: Loading State
|
|
56
56
|
- advanced_table_inline_row_loading: Inline Row Loading
|
|
57
|
-
- advanced_table_inline_row_loading_show_toggle: Inline Row Loading with Show Toggle
|
|
58
57
|
- advanced_table_column_headers: Multi-Header Columns
|
|
59
58
|
- advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
|
|
60
59
|
- advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
|
|
@@ -45,5 +45,4 @@ export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced
|
|
|
45
45
|
export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
|
|
46
46
|
export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'
|
|
47
47
|
export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
|
|
48
|
-
export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
|
|
49
|
-
export { default as AdvancedTableInlineRowLoadingShowToggle } from './_advanced_table_inline_row_loading_show_toggle.jsx'
|
|
48
|
+
export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
|