playbook_ui_docs 14.22.0.pre.alpha.PLAY2254datepickerdefaultdatenullvalueturbo8533 → 14.22.0.pre.alpha.customheaderat8564
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.jsx +69 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_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/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: 76db03ead6e3e424b1d2b607fef50fee913d58fdbcb6a404fc75f05d5d1e0a9c
|
|
4
|
+
data.tar.gz: b2839d04fee219e071f0a9935e5bc3daf881eb46a815c499e44edc88a29ae8a6
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 9aa4299336b6e87ce95e1d99a9cad0e8a2a2ec4fae296af27f6b5d832412b3e673103a0324365f31fa1035f4dcbaaa823f8f6c80f2d6b39ffef35bbca427f4f7
|
|
7
|
+
data.tar.gz: 51460484b334b4980e914e655132d52c964357e7c5b64d1561005755f52e4ee0832fd09cfc0359929358cf5b32e226b46a71f5dde47b139394e801454f2c19a7
|
|
@@ -0,0 +1,69 @@
|
|
|
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 AdvancedTableWithCustomHeader = (props) => {
|
|
10
|
+
const columnDefinitions = [
|
|
11
|
+
{
|
|
12
|
+
accessor: "year",
|
|
13
|
+
label: "Year",
|
|
14
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
accessor: "newEnrollments",
|
|
18
|
+
label: "New Enrollments",
|
|
19
|
+
header: () => (
|
|
20
|
+
<Flex alignItems="center"
|
|
21
|
+
justifyContent="center"
|
|
22
|
+
>
|
|
23
|
+
<Caption marginRight="xs">New Enrollments</Caption>
|
|
24
|
+
<Tooltip placement="top"
|
|
25
|
+
text="Whoa. I'm a Tooltip"
|
|
26
|
+
zIndex={10}
|
|
27
|
+
>
|
|
28
|
+
<Icon cursor="pointer"
|
|
29
|
+
icon="info"
|
|
30
|
+
size="xs"
|
|
31
|
+
/>
|
|
32
|
+
</Tooltip>
|
|
33
|
+
</Flex>
|
|
34
|
+
),
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
accessor: "scheduledMeetings",
|
|
38
|
+
label: "Scheduled Meetings",
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
accessor: "attendanceRate",
|
|
42
|
+
label: "Attendance Rate",
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
accessor: "completedClasses",
|
|
46
|
+
label: "Completed Classes",
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
accessor: "classCompletionRate",
|
|
50
|
+
label: "Class Completion Rate",
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
accessor: "graduatedStudents",
|
|
54
|
+
label: "Graduated Students",
|
|
55
|
+
},
|
|
56
|
+
];
|
|
57
|
+
|
|
58
|
+
return (
|
|
59
|
+
<div>
|
|
60
|
+
<AdvancedTable
|
|
61
|
+
columnDefinitions={columnDefinitions}
|
|
62
|
+
tableData={MOCK_DATA}
|
|
63
|
+
{...props}
|
|
64
|
+
/>
|
|
65
|
+
</div>
|
|
66
|
+
)
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
export default AdvancedTableWithCustomHeader
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The optional `header` key/value pair can be used within `columnDefinitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well.
|
|
@@ -40,6 +40,7 @@ examples:
|
|
|
40
40
|
- advanced_table_inline_row_loading: Inline Row Loading
|
|
41
41
|
- advanced_table_responsive: Responsive Tables
|
|
42
42
|
- advanced_table_custom_cell: Custom Components for Cells
|
|
43
|
+
- advanced_table_with_custom_header: Custom Header Cell
|
|
43
44
|
- advanced_table_pagination: Pagination
|
|
44
45
|
- advanced_table_pagination_with_props: Pagination Props
|
|
45
46
|
- advanced_table_column_headers: Multi-Header Columns
|
|
@@ -38,3 +38,4 @@ export { default as AdvancedTableRowStyling } from './_advanced_table_row_stylin
|
|
|
38
38
|
export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
|
|
39
39
|
export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
|
|
40
40
|
export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'
|
|
41
|
+
export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'
|