playbook_ui_docs 14.21.2.pre.alpha.PLAY18938263 → 14.21.2
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/example.yml +0 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -2
- data/dist/playbook-doc.js +1 -1
- metadata +2 -10
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx +0 -51
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md +0 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx +0 -77
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.md +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.html.erb +0 -63
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.md +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb +0 -38
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md +0 -7
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: 14.21.2
|
4
|
+
version: 14.21.2
|
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: 2025-06-
|
12
|
+
date: 2025-06-05 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: playbook_ui
|
@@ -54,14 +54,6 @@ files:
|
|
54
54
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.html.erb
|
55
55
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx
|
56
56
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.md
|
57
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx
|
58
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md
|
59
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx
|
60
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.md
|
61
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.html.erb
|
62
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.md
|
63
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb
|
64
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md
|
65
57
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.jsx
|
66
58
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.md
|
67
59
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.jsx
|
@@ -1,51 +0,0 @@
|
|
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 AdvancedTableColumnStyling = (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
|
-
columnStyling:{headerAlignment: "left", cellAlignment: "left"},
|
16
|
-
},
|
17
|
-
{
|
18
|
-
accessor: "scheduledMeetings",
|
19
|
-
label: "Scheduled Meetings",
|
20
|
-
columnStyling:{headerAlignment: "center", cellAlignment: "center"},
|
21
|
-
},
|
22
|
-
{
|
23
|
-
accessor: "attendanceRate",
|
24
|
-
label: "Attendance Rate",
|
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
|
-
tableData={MOCK_DATA}
|
45
|
-
{...props}
|
46
|
-
/>
|
47
|
-
</div>
|
48
|
-
)
|
49
|
-
}
|
50
|
-
|
51
|
-
export default AdvancedTableColumnStyling
|
@@ -1,7 +0,0 @@
|
|
1
|
-
The `columnStyling` prop is an optional item that can be used within `columnDefinitions` as shown in the code snippet below. It is an object that has 2 optional key/value pairs:
|
2
|
-
|
3
|
-
1) `headerAlignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
|
4
|
-
|
5
|
-
2) `cellAlignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
|
6
|
-
|
7
|
-
`columnStyling` can be used within the columnDefinition of all the columns or some of them, as shown. Each column has its own individual control in this way.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx
DELETED
@@ -1,77 +0,0 @@
|
|
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 AdvancedTableColumnStylingColumnHeaders = (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
|
-
columnStyling:{headerAlignment: "left", cellAlignment: "left"},
|
22
|
-
|
23
|
-
},
|
24
|
-
{
|
25
|
-
accessor: "scheduledMeetings",
|
26
|
-
label: "Scheduled Meetings",
|
27
|
-
},
|
28
|
-
],
|
29
|
-
},
|
30
|
-
],
|
31
|
-
},
|
32
|
-
{
|
33
|
-
label: "Performance Data",
|
34
|
-
columns: [
|
35
|
-
{
|
36
|
-
label: "Completion Metrics",
|
37
|
-
columns: [
|
38
|
-
{
|
39
|
-
accessor: "completedClasses",
|
40
|
-
label: "Completed Classes",
|
41
|
-
columnStyling:{headerAlignment: "center", cellAlignment: "center"},
|
42
|
-
},
|
43
|
-
{
|
44
|
-
accessor: "classCompletionRate",
|
45
|
-
label: "Class Completion Rate",
|
46
|
-
},
|
47
|
-
],
|
48
|
-
},
|
49
|
-
{
|
50
|
-
label: "Attendance",
|
51
|
-
columns: [
|
52
|
-
{
|
53
|
-
accessor: "attendanceRate",
|
54
|
-
label: "Attendance Rate",
|
55
|
-
},
|
56
|
-
{
|
57
|
-
accessor: "scheduledMeetings",
|
58
|
-
label: "Scheduled Meetings",
|
59
|
-
},
|
60
|
-
],
|
61
|
-
},
|
62
|
-
],
|
63
|
-
},
|
64
|
-
];
|
65
|
-
|
66
|
-
return (
|
67
|
-
<>
|
68
|
-
<AdvancedTable
|
69
|
-
columnDefinitions={columnDefinitions}
|
70
|
-
tableData={MOCK_DATA}
|
71
|
-
{...props}
|
72
|
-
/>
|
73
|
-
</>
|
74
|
-
);
|
75
|
-
};
|
76
|
-
|
77
|
-
export default AdvancedTableColumnStylingColumnHeaders
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.md
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
`columnStyling` can also be used with the multi column logic. When used in this way, `columnStyling` must be used within the leaf column's columnDefinition as shown.
|
@@ -1,63 +0,0 @@
|
|
1
|
-
<% column_definitions = [
|
2
|
-
{
|
3
|
-
accessor: "year",
|
4
|
-
label: "Year",
|
5
|
-
cellAccessors: ["quarter", "month", "day"],
|
6
|
-
},
|
7
|
-
{
|
8
|
-
label: "Enrollment Data",
|
9
|
-
columns: [
|
10
|
-
{
|
11
|
-
label: "Enrollment Stats",
|
12
|
-
columns: [
|
13
|
-
{
|
14
|
-
accessor: "newEnrollments",
|
15
|
-
label: "New Enrollments",
|
16
|
-
column_styling:{header_alignment:"left", cell_alignment:"left"}
|
17
|
-
},
|
18
|
-
{
|
19
|
-
accessor: "scheduledMeetings",
|
20
|
-
label: "Scheduled Meetings",
|
21
|
-
},
|
22
|
-
],
|
23
|
-
},
|
24
|
-
],
|
25
|
-
},
|
26
|
-
{
|
27
|
-
label: "Performance Data",
|
28
|
-
columns: [
|
29
|
-
{
|
30
|
-
label: "Completion Metrics",
|
31
|
-
columns: [
|
32
|
-
{
|
33
|
-
accessor: "completedClasses",
|
34
|
-
label: "Completed Classes",
|
35
|
-
column_styling:{header_alignment:"center", cell_alignment:"center"}
|
36
|
-
},
|
37
|
-
{
|
38
|
-
accessor: "classCompletionRate",
|
39
|
-
label: "Class Completion Rate",
|
40
|
-
},
|
41
|
-
],
|
42
|
-
},
|
43
|
-
{
|
44
|
-
label: "Attendance",
|
45
|
-
columns: [
|
46
|
-
{
|
47
|
-
accessor: "attendanceRate",
|
48
|
-
label: "Attendance Rate",
|
49
|
-
},
|
50
|
-
{
|
51
|
-
accessor: "scheduledMeetings",
|
52
|
-
label: "Scheduled Meetings",
|
53
|
-
},
|
54
|
-
],
|
55
|
-
},
|
56
|
-
],
|
57
|
-
},
|
58
|
-
] %>
|
59
|
-
|
60
|
-
<%= pb_rails("advanced_table", props: { id: "column-styling-multi", table_data: @table_data, column_definitions: column_definitions }) do %>
|
61
|
-
<%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
|
62
|
-
<%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions }) %>
|
63
|
-
<% end %>
|
@@ -1 +0,0 @@
|
|
1
|
-
`column_styling` can also be used with the multi column logic. When used in this way, `column_styling` must be used within the leaf column's column_definition as shown.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb
DELETED
@@ -1,38 +0,0 @@
|
|
1
|
-
<% column_definitions = [
|
2
|
-
{
|
3
|
-
accessor: "year",
|
4
|
-
label: "Year",
|
5
|
-
cellAccessors: ["quarter", "month", "day"],
|
6
|
-
},
|
7
|
-
{
|
8
|
-
accessor: "newEnrollments",
|
9
|
-
label: "New Enrollments",
|
10
|
-
column_styling:{header_alignment:"left", cell_alignment:"left"}
|
11
|
-
},
|
12
|
-
{
|
13
|
-
accessor: "scheduledMeetings",
|
14
|
-
label: "Scheduled Meetings",
|
15
|
-
column_styling:{header_alignment:"center", cell_alignment:"center"}
|
16
|
-
},
|
17
|
-
{
|
18
|
-
accessor: "attendanceRate",
|
19
|
-
label: "Attendance Rate",
|
20
|
-
},
|
21
|
-
{
|
22
|
-
accessor: "completedClasses",
|
23
|
-
label: "Completed Classes",
|
24
|
-
},
|
25
|
-
{
|
26
|
-
accessor: "classCompletionRate",
|
27
|
-
label: "Class Completion Rate",
|
28
|
-
},
|
29
|
-
{
|
30
|
-
accessor: "graduatedStudents",
|
31
|
-
label: "Graduated Students",
|
32
|
-
}
|
33
|
-
] %>
|
34
|
-
|
35
|
-
<%= pb_rails("advanced_table", props: { id: "column-styling", table_data: @table_data, column_definitions: column_definitions }) do %>
|
36
|
-
<%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
|
37
|
-
<%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions }) %>
|
38
|
-
<% end %>
|
@@ -1,7 +0,0 @@
|
|
1
|
-
The `column_styling` prop is an optional item that can be used within `column_definitions` as shown in the code snippet below. It is an object that has 2 optional key/value pairs:
|
2
|
-
|
3
|
-
1) `header_alignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
|
4
|
-
|
5
|
-
2) `cell_alignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
|
6
|
-
|
7
|
-
`column_styling` can be used within the column_definition of all the columns or some of them, as shown. Each column has its own individual control in this way.
|