playbook_ui_docs 14.23.0.pre.alpha.play22549234 → 14.23.0.pre.alpha.play23129273
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_sort_per_column.jsx +55 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column.md +6 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column_for_multi_column.jsx +80 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column_for_multi_column.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +3 -1
- data/dist/playbook-doc.js +1 -1
- metadata +6 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e52adbfbb10c9c8ff570aef6fabbfb8c55ad04fa570d35c9b23a995786f36b90
|
|
4
|
+
data.tar.gz: 0f1d96471117b96b01323ca496a92bef70b610d2767117f0578841357dcf8d69
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 3e35fe2f607aa42f59fd2dfe62ab42ecfbf506674a38f71f4dfa04e87c3e8fa5e0e4f5560e6c2a1271d5a6d84c3a1827bf689ca73e56b11c7d7351101d616db6
|
|
7
|
+
data.tar.gz: 9511ca4fdf29d878c8901afe865b58ac5794e612087c3fe3c87d528e0e804f9df70bf545666fd7ec6fd02746d28003b68d88a2dcf37765374d8c731968a6cc20
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import AdvancedTable from '../../pb_advanced_table/_advanced_table'
|
|
3
|
+
import MOCK_DATA from "./advanced_table_mock_data.json"
|
|
4
|
+
|
|
5
|
+
const AdvancedTableSortPerColumn = (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
|
+
enableSort: true,
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
accessor: "scheduledMeetings",
|
|
19
|
+
label: "Scheduled Meetings",
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
accessor: "attendanceRate",
|
|
23
|
+
label: "Attendance Rate",
|
|
24
|
+
enableSort: true,
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
accessor: "completedClasses",
|
|
28
|
+
label: "Completed Classes",
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
accessor: "classCompletionRate",
|
|
32
|
+
label: "Class Completion Rate",
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
accessor: "graduatedStudents",
|
|
36
|
+
label: "Graduated Students",
|
|
37
|
+
},
|
|
38
|
+
]
|
|
39
|
+
|
|
40
|
+
return (
|
|
41
|
+
<div>
|
|
42
|
+
<AdvancedTable
|
|
43
|
+
columnDefinitions={columnDefinitions}
|
|
44
|
+
enableSortingRemoval
|
|
45
|
+
tableData={MOCK_DATA}
|
|
46
|
+
{...props}
|
|
47
|
+
>
|
|
48
|
+
<AdvancedTable.Header />
|
|
49
|
+
<AdvancedTable.Body />
|
|
50
|
+
</AdvancedTable>
|
|
51
|
+
</div>
|
|
52
|
+
)
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
export default AdvancedTableSortPerColumn;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
Sorting can now be enabled on any of the columns. To do this, add `enableSort:true` to the columnDefinition of the column you want sorting enabled on. Once enabled, clicking on the header will toggle sort between ascending and descending.
|
|
2
|
+
|
|
3
|
+
The optional `enableSortingRemoval` prop can also be used in conjunction with sorting functionality. This prop is set to 'false' by default but if set to 'true' sorting order will circle like: 'none' -> 'desc' -> 'asc' -> 'none' -> ...
|
|
4
|
+
It is recommended that `enableSortingRemoval` be set to 'true' when sort is enabled on mutiple columns so that sorting direction is always clear via the sort icon.
|
|
5
|
+
|
|
6
|
+
__NOTE:__ For sort on the first column, continue to use the separate `enableSorting` prop on AdvancedTable.Header as [shown here](https://playbook.powerapp.cloud/kits/advanced_table/sorting/react#enable-sorting).
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import AdvancedTable from '../../pb_advanced_table/_advanced_table'
|
|
3
|
+
import MOCK_DATA from "./advanced_table_mock_data.json"
|
|
4
|
+
|
|
5
|
+
const AdvancedTableSortPerColumnForMultiColumn = (props) => {
|
|
6
|
+
const columnDefinitions = [
|
|
7
|
+
{
|
|
8
|
+
accessor: "year",
|
|
9
|
+
label: "Year",
|
|
10
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
label: "Enrollment Data",
|
|
14
|
+
columns: [
|
|
15
|
+
{
|
|
16
|
+
label: "Enrollment Stats",
|
|
17
|
+
columns: [
|
|
18
|
+
{
|
|
19
|
+
accessor: "newEnrollments",
|
|
20
|
+
label: "New Enrollments",
|
|
21
|
+
enableSort: true,
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
accessor: "scheduledMeetings",
|
|
25
|
+
label: "Scheduled Meetings",
|
|
26
|
+
},
|
|
27
|
+
],
|
|
28
|
+
},
|
|
29
|
+
],
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
label: "Performance Data",
|
|
33
|
+
columns: [
|
|
34
|
+
{
|
|
35
|
+
label: "Completion Metrics",
|
|
36
|
+
columns: [
|
|
37
|
+
{
|
|
38
|
+
accessor: "completedClasses",
|
|
39
|
+
label: "Completed Classes",
|
|
40
|
+
enableSort: true,
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
accessor: "classCompletionRate",
|
|
44
|
+
label: "Class Completion Rate",
|
|
45
|
+
},
|
|
46
|
+
],
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
label: "Attendance",
|
|
50
|
+
columns: [
|
|
51
|
+
{
|
|
52
|
+
accessor: "attendanceRate",
|
|
53
|
+
label: "Attendance Rate",
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
accessor: "scheduledMeetings",
|
|
57
|
+
label: "Scheduled Meetings",
|
|
58
|
+
},
|
|
59
|
+
],
|
|
60
|
+
},
|
|
61
|
+
],
|
|
62
|
+
},
|
|
63
|
+
];
|
|
64
|
+
|
|
65
|
+
return (
|
|
66
|
+
<div>
|
|
67
|
+
<AdvancedTable
|
|
68
|
+
columnDefinitions={columnDefinitions}
|
|
69
|
+
enableSortingRemoval
|
|
70
|
+
tableData={MOCK_DATA}
|
|
71
|
+
{...props}
|
|
72
|
+
>
|
|
73
|
+
<AdvancedTable.Header enableSorting />
|
|
74
|
+
<AdvancedTable.Body />
|
|
75
|
+
</AdvancedTable>
|
|
76
|
+
</div>
|
|
77
|
+
)
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
export default AdvancedTableSortPerColumnForMultiColumn;
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column_for_multi_column.md
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Sorting on columns can also be applied to columns when using the multi-header variant, however in this case sorting can only be set on leaf columns NOT on parent columns.
|
|
@@ -29,6 +29,8 @@ examples:
|
|
|
29
29
|
- advanced_table_default: Default (Required Props)
|
|
30
30
|
- advanced_table_sort: Enable Sorting
|
|
31
31
|
- advanced_table_sort_control: Sort Control
|
|
32
|
+
- advanced_table_sort_per_column: Enable Sort By Column
|
|
33
|
+
- advanced_table_sort_per_column_for_multi_column: Enable Sort By Column (Multi-Column)
|
|
32
34
|
- advanced_table_custom_sort: Custom Sort
|
|
33
35
|
- advanced_table_expanded_control: Expanded Control
|
|
34
36
|
- advanced_table_expand_by_depth: Expand by Depth
|
|
@@ -40,4 +40,6 @@ 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'
|
|
43
|
+
export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced_table_with_custom_header_multi_header.jsx'
|
|
44
|
+
export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
|
|
45
|
+
export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'
|