playbook_ui_docs 14.9.0.pre.rc.8 → 14.9.0.pre.rc.10
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_beta.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.html.erb +53 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.md +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +87 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
- 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: 63e1b8091f880d7ef84f28bb175bf20bb6608da88c91e586ca84dd62cf8a6ea5
|
|
4
|
+
data.tar.gz: 0f87d70daf0f4db3094ede1f93fc77a12d47ac013555e59c3bda95b2a624ede2
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: d997e43805db625ef8888706b5e4f66779927d2abded7fe7d7a4b0113fade5ba8a8c017ac68f28b2ed0aaa10d51965f1b88f45de9af6d36705a63f0956795a08
|
|
7
|
+
data.tar.gz: 629d8bfcaac4cada46b4ca5107dd49eabaaf2fceac1b39cecb250adcb8b752d3be002c34561e9ea21229a35ad96da74c7151bdc59e5911cf8194dc858cf7e7bd
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
|
|
56
56
|
<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
|
|
57
57
|
<%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
|
|
58
|
-
<%= pb_rails("advanced_table/table_body", props: { id: "
|
|
58
|
+
<%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
|
|
59
59
|
<% end %>
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
<%
|
|
2
|
+
column_definitions = [
|
|
3
|
+
{
|
|
4
|
+
accessor: "year",
|
|
5
|
+
label: "Year",
|
|
6
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
7
|
+
custom_renderer: ->(row, value) {
|
|
8
|
+
capture do
|
|
9
|
+
pb_rails("flex") do
|
|
10
|
+
pb_rails("title", props: { text: value, size: 4 }) +
|
|
11
|
+
pb_rails("badge", props: { dark: true, margin_left: "xxs", text: row[:newEnrollments].to_i > 20 ? "High" : "Low", variant: "neutral" })
|
|
12
|
+
end
|
|
13
|
+
end
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
accessor: "newEnrollments",
|
|
18
|
+
label: "New Enrollments",
|
|
19
|
+
custom_renderer: ->(row, value) { pb_rails("pill", props: { text: value, variant: "success" }) }
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
accessor: "scheduledMeetings",
|
|
23
|
+
label: "Scheduled Meetings",
|
|
24
|
+
custom_renderer: ->(row, value) { content_tag(:a, value, href: "#") }
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
accessor: "attendanceRate",
|
|
28
|
+
label: "Attendance Rate",
|
|
29
|
+
custom_renderer: ->(row, value) {
|
|
30
|
+
capture do
|
|
31
|
+
pb_rails("flex", props: { align_items: "end", orientation: "column" }) do
|
|
32
|
+
pb_rails("detail", props: { bold: true, color: "default", text: value }) +
|
|
33
|
+
pb_rails("caption", props: { size: "xs", text: row[:graduatedStudents] })
|
|
34
|
+
end
|
|
35
|
+
end
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
accessor: "completedClasses",
|
|
40
|
+
label: "Completed Classes",
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
accessor: "classCompletionRate",
|
|
44
|
+
label: "Class Completion Rate",
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
accessor: "graduatedStudents",
|
|
48
|
+
label: "Graduated Students",
|
|
49
|
+
}
|
|
50
|
+
]
|
|
51
|
+
%>
|
|
52
|
+
|
|
53
|
+
<%= pb_rails("advanced_table", props: { id: "custom_cell", table_data: @table_data, column_definitions: column_definitions }) %>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
The Advanced Table also allows for rendering custom components within individual Cells. To achieve this, you can make use of the optional `custom_renderer` item within each column_definitions. This function gives you access to the current Cell's value if you just want to use that with a custom Kit, but it also gives you access to the entire `row` object. The row object provides all data for the current row.
|
|
2
|
+
|
|
3
|
+
See [here](https://playbook.powerapp.cloud/kits/advanced_table/rails#column_definitions) for more indepth information on column_definitions are how to use them.
|
|
4
|
+
|
|
5
|
+
See [here](https://github.com/powerhome/playbook/tree/master/playbook/app/pb_kits/playbook/pb_advanced_table#readme) for the structure of the table_data used.
|
|
@@ -3,6 +3,7 @@ examples:
|
|
|
3
3
|
- advanced_table_beta: Default (Required Props)
|
|
4
4
|
- advanced_table_beta_subrow_headers: SubRow Headers
|
|
5
5
|
- advanced_table_beta_sort: Enable Sorting
|
|
6
|
+
- advanced_table_custom_cell_rails: Custom Components for Cells
|
|
6
7
|
|
|
7
8
|
react:
|
|
8
9
|
- advanced_table_default: Default (Required Props)
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Table from '../_table'
|
|
3
|
+
|
|
4
|
+
const TableStickyLeftColumns = () => {
|
|
5
|
+
return (
|
|
6
|
+
<Table
|
|
7
|
+
responsive="scroll"
|
|
8
|
+
size="md"
|
|
9
|
+
stickyLeftcolumn={["1", "2", "3"]}
|
|
10
|
+
>
|
|
11
|
+
<thead>
|
|
12
|
+
<tr>
|
|
13
|
+
<th id="1">{'Column 1'}</th>
|
|
14
|
+
<th id="2">{'Column 2'}</th>
|
|
15
|
+
<th id="3">{'Column 3'}</th>
|
|
16
|
+
<th>{'Column 4'}</th>
|
|
17
|
+
<th>{'Column 5'}</th>
|
|
18
|
+
<th>{'Column 6'}</th>
|
|
19
|
+
<th>{'Column 7'}</th>
|
|
20
|
+
<th>{'Column 8'}</th>
|
|
21
|
+
<th>{'Column 9'}</th>
|
|
22
|
+
<th>{'Column 10'}</th>
|
|
23
|
+
<th>{'Column 11'}</th>
|
|
24
|
+
<th>{'Column 12'}</th>
|
|
25
|
+
<th>{'Column 13'}</th>
|
|
26
|
+
<th>{'Column 14'}</th>
|
|
27
|
+
<th>{'Column 15'}</th>
|
|
28
|
+
</tr>
|
|
29
|
+
</thead>
|
|
30
|
+
<tbody>
|
|
31
|
+
<tr>
|
|
32
|
+
<td id="1">{'Value 1'}</td>
|
|
33
|
+
<td id="2">{'Value 2'}</td>
|
|
34
|
+
<td id="3">{'Value 3'}</td>
|
|
35
|
+
<td>{'Value 4'}</td>
|
|
36
|
+
<td>{'Value 5'}</td>
|
|
37
|
+
<td>{'Value 6'}</td>
|
|
38
|
+
<td>{'Value 7'}</td>
|
|
39
|
+
<td>{'Value 8'}</td>
|
|
40
|
+
<td>{'Value 9'}</td>
|
|
41
|
+
<td>{'Value 10'}</td>
|
|
42
|
+
<td>{'Value 11'}</td>
|
|
43
|
+
<td>{'Value 12'}</td>
|
|
44
|
+
<td>{'Value 13'}</td>
|
|
45
|
+
<td>{'Value 14'}</td>
|
|
46
|
+
<td>{'Value 15'}</td>
|
|
47
|
+
</tr>
|
|
48
|
+
<tr>
|
|
49
|
+
<td id="1">{'Value 1'}</td>
|
|
50
|
+
<td id="2">{'Value 2'}</td>
|
|
51
|
+
<td id="3">{'Value 3'}</td>
|
|
52
|
+
<td>{'Value 4'}</td>
|
|
53
|
+
<td>{'Value 5'}</td>
|
|
54
|
+
<td>{'Value 6'}</td>
|
|
55
|
+
<td>{'Value 7'}</td>
|
|
56
|
+
<td>{'Value 8'}</td>
|
|
57
|
+
<td>{'Value 9'}</td>
|
|
58
|
+
<td>{'Value 10'}</td>
|
|
59
|
+
<td>{'Value 11'}</td>
|
|
60
|
+
<td>{'Value 12'}</td>
|
|
61
|
+
<td>{'Value 13'}</td>
|
|
62
|
+
<td>{'Value 14'}</td>
|
|
63
|
+
<td>{'Value 15'}</td>
|
|
64
|
+
</tr>
|
|
65
|
+
<tr>
|
|
66
|
+
<td id="1">{'Value 1'}</td>
|
|
67
|
+
<td id="2">{'Value 2'}</td>
|
|
68
|
+
<td id="3">{'Value 3'}</td>
|
|
69
|
+
<td>{'Value 4'}</td>
|
|
70
|
+
<td>{'Value 5'}</td>
|
|
71
|
+
<td>{'Value 6'}</td>
|
|
72
|
+
<td>{'Value 7'}</td>
|
|
73
|
+
<td>{'Value 8'}</td>
|
|
74
|
+
<td>{'Value 9'}</td>
|
|
75
|
+
<td>{'Value 10'}</td>
|
|
76
|
+
<td>{'Value 11'}</td>
|
|
77
|
+
<td>{'Value 12'}</td>
|
|
78
|
+
<td>{'Value 13'}</td>
|
|
79
|
+
<td>{'Value 14'}</td>
|
|
80
|
+
<td>{'Value 15'}</td>
|
|
81
|
+
</tr>
|
|
82
|
+
</tbody>
|
|
83
|
+
</Table>
|
|
84
|
+
)
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
export default TableStickyLeftColumns
|
|
@@ -25,3 +25,4 @@ export { default as TableDiv } from './_table_div.jsx'
|
|
|
25
25
|
export { default as TableWithSubcomponents } from './_table_with_subcomponents.jsx'
|
|
26
26
|
export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
|
|
27
27
|
export { default as TableOuterPadding } from './_table_outer_padding.jsx'
|
|
28
|
+
export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'
|