playbook_ui_docs 16.9.0.pre.alpha.PLAY3011datepickertimepickerportalling17140 → 16.9.0.pre.alpha.PLAY3027advancedtablestickyactioncolumnvisbar17109
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_sticky_header.jsx +303 -27
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +205 -31
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb +36 -44
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx +10 -19
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +0 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +3 -5
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: f98578674640e7cf9f8a1ca0fa8c9b5a477105647525e889af1f886fe99ef9a9
|
|
4
|
+
data.tar.gz: da0494eb7675e467c27eee003df8611835698667b0121f71b5d25140e4f1d3ff
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 1f91c168a1239e50bdbb2b88e9c033bab107974dbeb1e6ce5ac336995b474564ed69d8c12bfc6d13c15a3e8b8153ec4aab226f35306e390e3469de2c802609e0
|
|
7
|
+
data.tar.gz: b8a1262b2017cbb016f0918575cfa6a50bbea21d5ece037e317608ca83d7cbf825c8bf24f86b5cbc91d566d11256ee981956eb665cb700a6f255bda5b0b45664
|
|
@@ -1,5 +1,22 @@
|
|
|
1
|
-
|
|
1
|
+
/* eslint-disable react/no-multi-comp, react/prop-types, no-console */
|
|
2
|
+
import React, { useState } from "react"
|
|
2
3
|
import AdvancedTable from '../../pb_advanced_table/_advanced_table'
|
|
4
|
+
import Caption from '../../pb_caption/_caption'
|
|
5
|
+
import CircleIconButton from "../../pb_circle_icon_button/_circle_icon_button"
|
|
6
|
+
import Flex from "../../pb_flex/_flex"
|
|
7
|
+
import Title from "../../pb_title/_title"
|
|
8
|
+
import MOCK_DATA from "./advanced_table_mock_data.json"
|
|
9
|
+
|
|
10
|
+
const selectableTableData = Array.from({ length: 15 }, (_, index) => ({
|
|
11
|
+
id: String(2020 + index),
|
|
12
|
+
year: String(2020 + index),
|
|
13
|
+
newEnrollments: String(20 + index),
|
|
14
|
+
scheduledMeetings: String(10 + index),
|
|
15
|
+
attendanceRate: `${50 + index}%`,
|
|
16
|
+
completedClasses: String(3 + index),
|
|
17
|
+
classCompletionRate: `${30 + index}%`,
|
|
18
|
+
graduatedStudents: String(19 + index),
|
|
19
|
+
}))
|
|
3
20
|
|
|
4
21
|
const tableData = Array.from({ length: 15 }, (_, index) => ({
|
|
5
22
|
year: String(2020 + index),
|
|
@@ -11,51 +28,310 @@ const tableData = Array.from({ length: 15 }, (_, index) => ({
|
|
|
11
28
|
graduatedStudents: String(19 + index),
|
|
12
29
|
}))
|
|
13
30
|
|
|
14
|
-
const
|
|
15
|
-
|
|
31
|
+
const columnDefinitions = [
|
|
32
|
+
{ accessor: "year", label: "Year" },
|
|
33
|
+
{ accessor: "newEnrollments", label: "New Enrollments" },
|
|
34
|
+
{ accessor: "scheduledMeetings", label: "Scheduled Meetings" },
|
|
35
|
+
{ accessor: "attendanceRate", label: "Attendance Rate" },
|
|
36
|
+
{ accessor: "completedClasses", label: "Completed Classes" },
|
|
37
|
+
{ accessor: "classCompletionRate", label: "Class Completion Rate" },
|
|
38
|
+
{ accessor: "graduatedStudents", label: "Graduated Students" },
|
|
39
|
+
]
|
|
40
|
+
|
|
41
|
+
const multiHeaderColumnDefinitions = [
|
|
42
|
+
{
|
|
43
|
+
accessor: "year",
|
|
44
|
+
label: "Year",
|
|
45
|
+
id: "year",
|
|
46
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
label: "Enrollment Data",
|
|
50
|
+
id: "enrollmentData",
|
|
51
|
+
columns: [
|
|
52
|
+
{
|
|
53
|
+
label: "Enrollment Stats",
|
|
54
|
+
id: "enrollmentStats",
|
|
55
|
+
columns: [
|
|
56
|
+
{ accessor: "newEnrollments", label: "New Enrollments", id: "newEnrollments" },
|
|
57
|
+
{ accessor: "scheduledMeetings", label: "Scheduled Meetings", id: "scheduledMeetings" },
|
|
58
|
+
],
|
|
59
|
+
},
|
|
60
|
+
],
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
label: "Performance Data",
|
|
64
|
+
id: "performanceData",
|
|
65
|
+
columns: [
|
|
66
|
+
{
|
|
67
|
+
label: "Completion Metrics",
|
|
68
|
+
id: "completionMetrics",
|
|
69
|
+
columns: [
|
|
70
|
+
{ accessor: "completedClasses", label: "Completed Classes", id: "completedClasses" },
|
|
71
|
+
{ accessor: "classCompletionRate", label: "Class Completion Rate", id: "classCompletionRate" },
|
|
72
|
+
],
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
label: "Attendance",
|
|
76
|
+
id: "attendance",
|
|
77
|
+
columns: [
|
|
78
|
+
{ accessor: "attendanceRate", label: "Attendance Rate", id: "attendanceRate" },
|
|
79
|
+
{ accessor: "graduatedStudents", label: "Graduated Students", id: "graduatedStudents" },
|
|
80
|
+
],
|
|
81
|
+
},
|
|
82
|
+
],
|
|
83
|
+
},
|
|
84
|
+
]
|
|
85
|
+
|
|
86
|
+
const multiHeaderSelectableColumnDefinitions = [
|
|
87
|
+
{ accessor: "year", label: "Year" },
|
|
88
|
+
{
|
|
89
|
+
label: "Enrollment Data",
|
|
90
|
+
columns: [
|
|
91
|
+
{
|
|
92
|
+
label: "Enrollment Stats",
|
|
93
|
+
columns: [
|
|
94
|
+
{ accessor: "newEnrollments", label: "New Enrollments" },
|
|
95
|
+
{ accessor: "scheduledMeetings", label: "Scheduled Meetings" },
|
|
96
|
+
],
|
|
97
|
+
},
|
|
98
|
+
],
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
label: "Performance Data",
|
|
102
|
+
columns: [
|
|
103
|
+
{
|
|
104
|
+
label: "Completion Metrics",
|
|
105
|
+
columns: [
|
|
106
|
+
{ accessor: "completedClasses", label: "Completed Classes" },
|
|
107
|
+
{ accessor: "classCompletionRate", label: "Class Completion Rate" },
|
|
108
|
+
],
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
label: "Attendance",
|
|
112
|
+
columns: [
|
|
113
|
+
{ accessor: "attendanceRate", label: "Attendance Rate" },
|
|
114
|
+
{ accessor: "graduatedStudents", label: "Graduated Students" },
|
|
115
|
+
],
|
|
116
|
+
},
|
|
117
|
+
],
|
|
118
|
+
},
|
|
119
|
+
]
|
|
120
|
+
|
|
121
|
+
const columnDefinitionsWithIds = columnDefinitions.map((column) => ({
|
|
122
|
+
...column,
|
|
123
|
+
id: column.accessor,
|
|
124
|
+
cellAccessors: column.accessor === "year" ? ["quarter", "month", "day"] : undefined,
|
|
125
|
+
}))
|
|
126
|
+
|
|
127
|
+
const tableProps = { sticky: true }
|
|
128
|
+
|
|
129
|
+
const scrollContainerStyle = {
|
|
130
|
+
maxHeight: "320px",
|
|
131
|
+
overflowY: "auto",
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
const StickyHeaderTable = ({ caption, marginTop, responsive, ...tablePropsToPass }) => {
|
|
135
|
+
const isResponsive = responsive === "scroll"
|
|
136
|
+
|
|
137
|
+
return (
|
|
138
|
+
<>
|
|
139
|
+
<Caption marginTop={marginTop}
|
|
140
|
+
text={caption}
|
|
141
|
+
/>
|
|
142
|
+
{isResponsive ? (
|
|
143
|
+
<AdvancedTable
|
|
144
|
+
maxHeight="xs"
|
|
145
|
+
responsive={responsive}
|
|
146
|
+
tableProps={tableProps}
|
|
147
|
+
{...tablePropsToPass}
|
|
148
|
+
/>
|
|
149
|
+
) : (
|
|
150
|
+
<div style={scrollContainerStyle}>
|
|
151
|
+
<AdvancedTable
|
|
152
|
+
responsive={responsive}
|
|
153
|
+
tableProps={tableProps}
|
|
154
|
+
{...tablePropsToPass}
|
|
155
|
+
/>
|
|
156
|
+
</div>
|
|
157
|
+
)}
|
|
158
|
+
</>
|
|
159
|
+
)
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
const SelectableRowsActionsTable = ({
|
|
163
|
+
caption,
|
|
164
|
+
columnDefinitions: tableColumnDefinitions,
|
|
165
|
+
marginTop,
|
|
166
|
+
responsive,
|
|
167
|
+
tableData: rows,
|
|
168
|
+
...props
|
|
169
|
+
}) => {
|
|
170
|
+
const [selectedRows, setSelectedRows] = useState()
|
|
171
|
+
|
|
172
|
+
const CustomActions = () => {
|
|
173
|
+
const rowIds = selectedRows ? Object.keys(selectedRows) : []
|
|
174
|
+
|
|
175
|
+
return (
|
|
176
|
+
<Flex>
|
|
177
|
+
<CircleIconButton
|
|
178
|
+
icon="file-csv"
|
|
179
|
+
onClick={() =>
|
|
180
|
+
alert(rowIds.length === 0 ? "No Selection Made" : `Row ids ${rowIds.join(", ")} will be exported!`)
|
|
181
|
+
}
|
|
182
|
+
variant="link"
|
|
183
|
+
/>
|
|
184
|
+
<CircleIconButton
|
|
185
|
+
icon="trash-alt"
|
|
186
|
+
onClick={() =>
|
|
187
|
+
alert(rowIds.length === 0 ? "No Selection Made" : `Row ids ${rowIds.join(", ")} will be deleted!`)
|
|
188
|
+
}
|
|
189
|
+
variant="link"
|
|
190
|
+
/>
|
|
191
|
+
</Flex>
|
|
192
|
+
)
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
return (
|
|
196
|
+
<StickyHeaderTable
|
|
197
|
+
actions={<CustomActions />}
|
|
198
|
+
caption={caption}
|
|
199
|
+
columnDefinitions={tableColumnDefinitions}
|
|
200
|
+
enableToggleExpansion="none"
|
|
201
|
+
marginTop={marginTop}
|
|
202
|
+
onRowSelectionChange={setSelectedRows}
|
|
203
|
+
responsive={responsive}
|
|
204
|
+
selectableRows
|
|
205
|
+
tableData={rows}
|
|
206
|
+
{...props}
|
|
207
|
+
/>
|
|
208
|
+
)
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
const buildExamples = (responsive, responsiveLabel) => {
|
|
212
|
+
const suffix = responsive === "none" ? "non_responsive" : "responsive"
|
|
213
|
+
const marginTop = "md"
|
|
214
|
+
|
|
215
|
+
return [
|
|
16
216
|
{
|
|
17
|
-
|
|
18
|
-
|
|
217
|
+
key: `default_${suffix}`,
|
|
218
|
+
render: () => (
|
|
219
|
+
<StickyHeaderTable
|
|
220
|
+
caption={`Sticky header (default) — ${responsiveLabel}`}
|
|
221
|
+
columnDefinitions={columnDefinitions}
|
|
222
|
+
marginTop={marginTop}
|
|
223
|
+
responsive={responsive}
|
|
224
|
+
tableData={tableData}
|
|
225
|
+
/>
|
|
226
|
+
),
|
|
19
227
|
},
|
|
20
228
|
{
|
|
21
|
-
|
|
22
|
-
|
|
229
|
+
key: `column_visibility_${suffix}`,
|
|
230
|
+
render: () => (
|
|
231
|
+
<StickyHeaderTable
|
|
232
|
+
caption={`Sticky header with column visibility control — ${responsiveLabel}`}
|
|
233
|
+
columnDefinitions={columnDefinitionsWithIds}
|
|
234
|
+
columnVisibilityControl={{ default: true }}
|
|
235
|
+
marginTop={marginTop}
|
|
236
|
+
responsive={responsive}
|
|
237
|
+
tableData={MOCK_DATA}
|
|
238
|
+
/>
|
|
239
|
+
),
|
|
23
240
|
},
|
|
24
241
|
{
|
|
25
|
-
|
|
26
|
-
|
|
242
|
+
key: `column_visibility_multi_${suffix}`,
|
|
243
|
+
render: () => (
|
|
244
|
+
<StickyHeaderTable
|
|
245
|
+
caption={`Sticky header with column visibility control (multi-header columns) — ${responsiveLabel}`}
|
|
246
|
+
columnDefinitions={multiHeaderColumnDefinitions}
|
|
247
|
+
columnVisibilityControl={{ default: true }}
|
|
248
|
+
marginTop={marginTop}
|
|
249
|
+
responsive={responsive}
|
|
250
|
+
tableData={MOCK_DATA}
|
|
251
|
+
/>
|
|
252
|
+
),
|
|
27
253
|
},
|
|
28
254
|
{
|
|
29
|
-
|
|
30
|
-
|
|
255
|
+
key: `selectable_rows_${suffix}`,
|
|
256
|
+
render: () => (
|
|
257
|
+
<StickyHeaderTable
|
|
258
|
+
caption={`Sticky header with selectable rows — ${responsiveLabel}`}
|
|
259
|
+
columnDefinitions={columnDefinitions}
|
|
260
|
+
enableToggleExpansion="none"
|
|
261
|
+
marginTop={marginTop}
|
|
262
|
+
onRowSelectionChange={(selectedRows) => console.log(selectedRows)}
|
|
263
|
+
responsive={responsive}
|
|
264
|
+
selectableRows
|
|
265
|
+
tableData={selectableTableData}
|
|
266
|
+
/>
|
|
267
|
+
),
|
|
31
268
|
},
|
|
32
269
|
{
|
|
33
|
-
|
|
34
|
-
|
|
270
|
+
key: `selectable_rows_actions_${suffix}`,
|
|
271
|
+
render: () => (
|
|
272
|
+
<SelectableRowsActionsTable
|
|
273
|
+
caption={`Sticky header with selectable rows and action bar — ${responsiveLabel}`}
|
|
274
|
+
columnDefinitions={columnDefinitions}
|
|
275
|
+
marginTop={marginTop}
|
|
276
|
+
responsive={responsive}
|
|
277
|
+
tableData={selectableTableData}
|
|
278
|
+
/>
|
|
279
|
+
),
|
|
35
280
|
},
|
|
36
281
|
{
|
|
37
|
-
|
|
38
|
-
|
|
282
|
+
key: `selectable_rows_multi_${suffix}`,
|
|
283
|
+
render: () => (
|
|
284
|
+
<StickyHeaderTable
|
|
285
|
+
caption={`Sticky header with selectable rows (multi-header columns) — ${responsiveLabel}`}
|
|
286
|
+
columnDefinitions={multiHeaderSelectableColumnDefinitions}
|
|
287
|
+
enableToggleExpansion="none"
|
|
288
|
+
marginTop={marginTop}
|
|
289
|
+
onRowSelectionChange={(selectedRows) => console.log(selectedRows)}
|
|
290
|
+
responsive={responsive}
|
|
291
|
+
selectableRows
|
|
292
|
+
tableData={selectableTableData}
|
|
293
|
+
/>
|
|
294
|
+
),
|
|
39
295
|
},
|
|
40
296
|
{
|
|
41
|
-
|
|
42
|
-
|
|
297
|
+
key: `selectable_rows_actions_multi_${suffix}`,
|
|
298
|
+
render: () => (
|
|
299
|
+
<SelectableRowsActionsTable
|
|
300
|
+
caption={`Sticky header with selectable rows and action bar (multi-header columns) — ${responsiveLabel}`}
|
|
301
|
+
columnDefinitions={multiHeaderSelectableColumnDefinitions}
|
|
302
|
+
marginTop={marginTop}
|
|
303
|
+
responsive={responsive}
|
|
304
|
+
tableData={selectableTableData}
|
|
305
|
+
/>
|
|
306
|
+
),
|
|
43
307
|
},
|
|
44
308
|
]
|
|
309
|
+
}
|
|
45
310
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
311
|
+
const AdvancedTableStickyHeader = () => {
|
|
312
|
+
const nonResponsiveExamples = buildExamples("none", "Non Responsive")
|
|
313
|
+
const responsiveExamples = buildExamples("scroll", "Responsive")
|
|
49
314
|
|
|
50
315
|
return (
|
|
51
|
-
<div
|
|
52
|
-
<
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
316
|
+
<div>
|
|
317
|
+
<Title marginBottom="sm"
|
|
318
|
+
size={4}
|
|
319
|
+
tag="h4"
|
|
320
|
+
text="Non Responsive"
|
|
321
|
+
/>
|
|
322
|
+
{nonResponsiveExamples.map(({ key, render }) => (
|
|
323
|
+
<React.Fragment key={key}>{render()}</React.Fragment>
|
|
324
|
+
))}
|
|
325
|
+
|
|
326
|
+
<Title marginBottom="sm"
|
|
327
|
+
marginTop="xl"
|
|
328
|
+
size={4}
|
|
329
|
+
tag="h4"
|
|
330
|
+
text="Responsive"
|
|
58
331
|
/>
|
|
332
|
+
{responsiveExamples.map(({ key, render }) => (
|
|
333
|
+
<React.Fragment key={key}>{render()}</React.Fragment>
|
|
334
|
+
))}
|
|
59
335
|
</div>
|
|
60
336
|
)
|
|
61
337
|
}
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb
CHANGED
|
@@ -1,32 +1,46 @@
|
|
|
1
1
|
<% column_definitions = [
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
2
|
+
{ accessor: "year", label: "Year" },
|
|
3
|
+
{ accessor: "newEnrollments", label: "New Enrollments" },
|
|
4
|
+
{ accessor: "scheduledMeetings", label: "Scheduled Meetings" },
|
|
5
|
+
{ accessor: "attendanceRate", label: "Attendance Rate" },
|
|
6
|
+
{ accessor: "completedClasses", label: "Completed Classes" },
|
|
7
|
+
{ accessor: "classCompletionRate", label: "Class Completion Rate" },
|
|
8
|
+
{ accessor: "graduatedStudents", label: "Graduated Students" },
|
|
9
|
+
] %>
|
|
10
|
+
|
|
11
|
+
<% multi_header_selectable_column_definitions = [
|
|
12
|
+
{ accessor: "year", label: "Year" },
|
|
13
|
+
{
|
|
14
|
+
label: "Enrollment Data",
|
|
15
|
+
columns: [
|
|
16
|
+
{
|
|
17
|
+
label: "Enrollment Stats",
|
|
18
|
+
columns: [
|
|
19
|
+
{ accessor: "newEnrollments", label: "New Enrollments" },
|
|
20
|
+
{ accessor: "scheduledMeetings", label: "Scheduled Meetings" },
|
|
21
|
+
],
|
|
22
|
+
},
|
|
23
|
+
],
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
label: "Performance Data",
|
|
27
|
+
columns: [
|
|
28
|
+
{
|
|
29
|
+
label: "Completion Metrics",
|
|
30
|
+
columns: [
|
|
31
|
+
{ accessor: "completedClasses", label: "Completed Classes" },
|
|
32
|
+
{ accessor: "classCompletionRate", label: "Class Completion Rate" },
|
|
33
|
+
],
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
label: "Attendance",
|
|
37
|
+
columns: [
|
|
38
|
+
{ accessor: "attendanceRate", label: "Attendance Rate" },
|
|
39
|
+
{ accessor: "graduatedStudents", label: "Graduated Students" },
|
|
40
|
+
],
|
|
41
|
+
},
|
|
42
|
+
],
|
|
43
|
+
},
|
|
30
44
|
] %>
|
|
31
45
|
|
|
32
46
|
<% table_data = 15.times.map do |index|
|
|
@@ -42,6 +56,166 @@
|
|
|
42
56
|
}
|
|
43
57
|
end %>
|
|
44
58
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
59
|
+
<% selectable_table_data = table_data %>
|
|
60
|
+
|
|
61
|
+
<% actions = [
|
|
62
|
+
pb_rails("circle_icon_button", props: {
|
|
63
|
+
icon: "file-csv",
|
|
64
|
+
variant: "link",
|
|
65
|
+
data: { action_type: "export" },
|
|
66
|
+
}),
|
|
67
|
+
pb_rails("circle_icon_button", props: {
|
|
68
|
+
icon: "trash-alt",
|
|
69
|
+
variant: "link",
|
|
70
|
+
data: { action_type: "delete" },
|
|
71
|
+
}),
|
|
72
|
+
] %>
|
|
73
|
+
|
|
74
|
+
<% sticky_examples = [
|
|
75
|
+
{
|
|
76
|
+
id_prefix: "sticky_header_default",
|
|
77
|
+
caption: "Sticky header (default)",
|
|
78
|
+
props: {
|
|
79
|
+
table_data: table_data,
|
|
80
|
+
column_definitions: column_definitions,
|
|
81
|
+
},
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
id_prefix: "sticky_header_selectable_rows",
|
|
85
|
+
caption: "Sticky header with selectable rows",
|
|
86
|
+
props: {
|
|
87
|
+
table_data: selectable_table_data,
|
|
88
|
+
column_definitions: column_definitions,
|
|
89
|
+
selectable_rows: true,
|
|
90
|
+
enable_toggle_expansion: "none",
|
|
91
|
+
},
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
id_prefix: "sticky_header_selectable_rows_multi_header",
|
|
95
|
+
caption: "Sticky header with selectable rows (multi-header columns)",
|
|
96
|
+
props: {
|
|
97
|
+
table_data: selectable_table_data,
|
|
98
|
+
column_definitions: multi_header_selectable_column_definitions,
|
|
99
|
+
selectable_rows: true,
|
|
100
|
+
enable_toggle_expansion: "none",
|
|
101
|
+
},
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
id_prefix: "sticky_header_selectable_rows_actions",
|
|
105
|
+
caption: "Sticky header with selectable rows and action bar",
|
|
106
|
+
props: {
|
|
107
|
+
table_data: selectable_table_data,
|
|
108
|
+
column_definitions: column_definitions,
|
|
109
|
+
selectable_rows: true,
|
|
110
|
+
enable_toggle_expansion: "none",
|
|
111
|
+
actions: actions,
|
|
112
|
+
},
|
|
113
|
+
action_bar: true,
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
id_prefix: "sticky_header_selectable_rows_actions_multi_header",
|
|
117
|
+
caption: "Sticky header with selectable rows and action bar (multi-header columns)",
|
|
118
|
+
props: {
|
|
119
|
+
table_data: selectable_table_data,
|
|
120
|
+
column_definitions: multi_header_selectable_column_definitions,
|
|
121
|
+
selectable_rows: true,
|
|
122
|
+
enable_toggle_expansion: "none",
|
|
123
|
+
actions: actions,
|
|
124
|
+
},
|
|
125
|
+
action_bar: true,
|
|
126
|
+
},
|
|
127
|
+
] %>
|
|
128
|
+
|
|
129
|
+
<% responsive_sections = [
|
|
130
|
+
{ key: "none", label: "Non Responsive" },
|
|
131
|
+
{ key: "scroll", label: "Responsive" },
|
|
132
|
+
] %>
|
|
133
|
+
|
|
134
|
+
<% action_bar_table_ids = [] %>
|
|
135
|
+
|
|
136
|
+
<% responsive_sections.each_with_index do |section, section_index| %>
|
|
137
|
+
<%= pb_rails("title", props: {
|
|
138
|
+
margin_bottom: "sm",
|
|
139
|
+
margin_top: section_index.zero? ? nil : "xl",
|
|
140
|
+
size: 4,
|
|
141
|
+
tag: "h4",
|
|
142
|
+
text: section[:label],
|
|
143
|
+
}) %>
|
|
144
|
+
|
|
145
|
+
<% sticky_examples.each_with_index do |example, example_index| %>
|
|
146
|
+
<% table_id = "#{example[:id_prefix]}_#{section[:key]}" %>
|
|
147
|
+
<% action_bar_table_ids << table_id if example[:action_bar] %>
|
|
148
|
+
|
|
149
|
+
<%= pb_rails("caption", props: {
|
|
150
|
+
margin_top: example_index.zero? ? nil : "md",
|
|
151
|
+
text: "#{example[:caption]} — #{section[:label]}",
|
|
152
|
+
}) %>
|
|
153
|
+
|
|
154
|
+
<% table_props = {
|
|
155
|
+
id: table_id,
|
|
156
|
+
responsive: section[:key],
|
|
157
|
+
table_props: { sticky: true },
|
|
158
|
+
} %>
|
|
159
|
+
<% table_props[:max_height] = "xs" if section[:key] == "scroll" %>
|
|
160
|
+
|
|
161
|
+
<% if section[:key] == "scroll" %>
|
|
162
|
+
<%= pb_rails("advanced_table", props: example[:props].merge(table_props)) %>
|
|
163
|
+
<% else %>
|
|
164
|
+
<div style="max-height: 320px; overflow-y: auto;">
|
|
165
|
+
<%= pb_rails("advanced_table", props: example[:props].merge(table_props)) %>
|
|
166
|
+
</div>
|
|
167
|
+
<% end %>
|
|
168
|
+
<% end %>
|
|
169
|
+
<% end %>
|
|
170
|
+
|
|
171
|
+
<script>
|
|
172
|
+
window.handleStickyHeaderActionClick = function(tableId, actionType) {
|
|
173
|
+
const tableContainer = document.getElementById(tableId);
|
|
174
|
+
if (!tableContainer) return;
|
|
175
|
+
|
|
176
|
+
const selectedRowsJSON = tableContainer.getAttribute('data-selected-rows');
|
|
177
|
+
let selectedRowIds = [];
|
|
178
|
+
|
|
179
|
+
try {
|
|
180
|
+
if (selectedRowsJSON) {
|
|
181
|
+
selectedRowIds = JSON.parse(selectedRowsJSON);
|
|
182
|
+
}
|
|
183
|
+
} catch (e) {
|
|
184
|
+
const checkboxes = tableContainer.querySelectorAll('input[type="checkbox"]:checked');
|
|
185
|
+
const selectedCheckboxes = Array.from(checkboxes).filter(checkbox =>
|
|
186
|
+
checkbox.id !== 'select-all-rows' &&
|
|
187
|
+
!checkbox.closest('#select-all-rows')
|
|
188
|
+
);
|
|
189
|
+
selectedRowIds = selectedCheckboxes.map(checkbox => checkbox.id);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
if (!selectedRowIds || selectedRowIds.length === 0) {
|
|
193
|
+
alert('No Selection Made');
|
|
194
|
+
} else {
|
|
195
|
+
const selectedRowsString = selectedRowIds.join(', ');
|
|
196
|
+
if (actionType === 'export') {
|
|
197
|
+
alert('Row ids ' + selectedRowsString + ' will be exported!');
|
|
198
|
+
} else if (actionType === 'delete') {
|
|
199
|
+
alert('Row ids ' + selectedRowsString + ' will be deleted!');
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
};
|
|
203
|
+
|
|
204
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
205
|
+
<%= action_bar_table_ids.map { |id| "'#{id}'" }.join(", ").html_safe %>.forEach(function(tableId) {
|
|
206
|
+
const tableContainer = document.getElementById(tableId);
|
|
207
|
+
if (!tableContainer) return;
|
|
208
|
+
|
|
209
|
+
const actionBar = tableContainer.querySelector('.row-selection-actions-card');
|
|
210
|
+
if (!actionBar) return;
|
|
211
|
+
|
|
212
|
+
actionBar.addEventListener('click', function(e) {
|
|
213
|
+
const button = e.target.closest('[data-action-type]');
|
|
214
|
+
if (!button) return;
|
|
215
|
+
|
|
216
|
+
e.preventDefault();
|
|
217
|
+
window.handleStickyHeaderActionClick(tableId, button.dataset.actionType);
|
|
218
|
+
});
|
|
219
|
+
});
|
|
220
|
+
});
|
|
221
|
+
</script>
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb
CHANGED
|
@@ -1,47 +1,39 @@
|
|
|
1
1
|
<% column_definitions = [
|
|
2
|
-
{
|
|
3
|
-
accessor: "year",
|
|
4
|
-
label: "Year",
|
|
5
|
-
},
|
|
6
|
-
{
|
|
7
|
-
accessor: "newEnrollments",
|
|
8
|
-
label: "New Enrollments",
|
|
9
|
-
},
|
|
10
|
-
{
|
|
11
|
-
accessor: "scheduledMeetings",
|
|
12
|
-
label: "Scheduled Meetings",
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
accessor: "attendanceRate",
|
|
16
|
-
label: "Attendance Rate",
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
accessor: "completedClasses",
|
|
20
|
-
label: "Completed Classes",
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
accessor: "classCompletionRate",
|
|
24
|
-
label: "Class Completion Rate",
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
accessor: "graduatedStudents",
|
|
28
|
-
label: "Graduated Students",
|
|
29
|
-
}
|
|
30
|
-
] %>
|
|
31
|
-
|
|
32
|
-
<% table_data = 15.times.map do |index|
|
|
33
2
|
{
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
3
|
+
accessor: "year",
|
|
4
|
+
label: "Year",
|
|
5
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
6
|
+
},
|
|
7
|
+
{
|
|
8
|
+
accessor: "newEnrollments",
|
|
9
|
+
label: "New Enrollments",
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
accessor: "scheduledMeetings",
|
|
13
|
+
label: "Scheduled Meetings",
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
accessor: "attendanceRate",
|
|
17
|
+
label: "Attendance Rate",
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
accessor: "completedClasses",
|
|
21
|
+
label: "Completed Classes",
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
accessor: "classCompletionRate",
|
|
25
|
+
label: "Class Completion Rate",
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
accessor: "graduatedStudents",
|
|
29
|
+
label: "Graduated Students",
|
|
30
|
+
},
|
|
31
|
+
] %>
|
|
44
32
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
33
|
+
<%= pb_rails("advanced_table", props: {
|
|
34
|
+
id: "table_props_sticky_table",
|
|
35
|
+
table_data: @table_data,
|
|
36
|
+
column_definitions: column_definitions,
|
|
37
|
+
max_height: "xs",
|
|
38
|
+
table_props: { sticky: true },
|
|
39
|
+
}) %>
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx
CHANGED
|
@@ -1,21 +1,13 @@
|
|
|
1
1
|
import React from "react"
|
|
2
2
|
import AdvancedTable from '../../pb_advanced_table/_advanced_table'
|
|
3
|
-
|
|
4
|
-
const tableData = Array.from({ length: 15 }, (_, index) => ({
|
|
5
|
-
year: String(2020 + index),
|
|
6
|
-
newEnrollments: String(20 + index),
|
|
7
|
-
scheduledMeetings: String(10 + index),
|
|
8
|
-
attendanceRate: `${50 + index}%`,
|
|
9
|
-
completedClasses: String(3 + index),
|
|
10
|
-
classCompletionRate: `${30 + index}%`,
|
|
11
|
-
graduatedStudents: String(19 + index),
|
|
12
|
-
}))
|
|
3
|
+
import MOCK_DATA from "./advanced_table_mock_data.json"
|
|
13
4
|
|
|
14
5
|
const AdvancedTableTablePropsStickyHeader = (props) => {
|
|
15
6
|
const columnDefinitions = [
|
|
16
7
|
{
|
|
17
8
|
accessor: "year",
|
|
18
9
|
label: "Year",
|
|
10
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
19
11
|
},
|
|
20
12
|
{
|
|
21
13
|
accessor: "newEnrollments",
|
|
@@ -44,18 +36,17 @@ const AdvancedTableTablePropsStickyHeader = (props) => {
|
|
|
44
36
|
]
|
|
45
37
|
|
|
46
38
|
const tableProps = {
|
|
47
|
-
sticky: true
|
|
39
|
+
sticky: true,
|
|
48
40
|
}
|
|
49
41
|
|
|
50
42
|
return (
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
</div>
|
|
43
|
+
<AdvancedTable
|
|
44
|
+
columnDefinitions={columnDefinitions}
|
|
45
|
+
maxHeight="xs"
|
|
46
|
+
tableData={MOCK_DATA}
|
|
47
|
+
tableProps={tableProps}
|
|
48
|
+
{...props}
|
|
49
|
+
/>
|
|
59
50
|
)
|
|
60
51
|
}
|
|
61
52
|
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md
CHANGED
|
@@ -2,10 +2,6 @@ Create a sticky header that works for responsive Advanced Tables by setting `sti
|
|
|
2
2
|
|
|
3
3
|
**NOTE**: This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
|
|
4
4
|
|
|
5
|
-
Scroll inside the table preview to see the header stick.
|
|
6
|
-
|
|
7
|
-
This example builds flat table data inline for the docs preview. For typical `table_data` setup, see [Default (Required Props)](/kits/advanced_table/default/rails#advanced_table_beta).
|
|
8
|
-
|
|
9
5
|
Expand the table above to see this in action.
|
|
10
6
|
|
|
11
7
|
A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#sticky-header) doc example above.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and
|
|
1
|
+
Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/global_props/max_height) global prop.
|
|
2
2
|
|
|
3
|
-
**NOTE**: The header is sticky within the table
|
|
3
|
+
**NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
Expand the table above to see responsive behavior in action.
|
|
5
|
+
Expand the table above to see this in action.
|
|
8
6
|
|
|
9
7
|
A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header) doc example above.
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui_docs
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 16.9.0.pre.alpha.
|
|
4
|
+
version: 16.9.0.pre.alpha.PLAY3027advancedtablestickyactioncolumnvisbar17109
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2026-06-
|
|
12
|
+
date: 2026-06-16 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|