playbook_ui_docs 14.10.0.pre.alpha.PBNTR662stickyrightcolumnreact5160 → 14.10.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5137

Sign up to get free protection for your applications and to get access to all the features.
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.10.0.pre.alpha.PBNTR662stickyrightcolumnreact5160
4
+ version: 14.10.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5137
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: 2024-12-31 00:00:00.000000000 Z
12
+ date: 2024-12-27 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -43,10 +43,6 @@ files:
43
43
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md
44
44
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.html.erb
45
45
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.md
46
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.jsx
47
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.md
48
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx
49
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.md
50
46
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx
51
47
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md
52
48
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.html.erb
@@ -368,7 +364,6 @@ files:
368
364
  - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.jsx
369
365
  - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb
370
366
  - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx
371
- - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.md
372
367
  - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.html.erb
373
368
  - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.jsx
374
369
  - app/pb_kits/playbook/pb_circle_icon_button/docs/_description.md
@@ -1755,14 +1750,10 @@ files:
1755
1750
  - app/pb_kits/playbook/pb_table/docs/_table_sticky.html.erb
1756
1751
  - app/pb_kits/playbook/pb_table/docs/_table_sticky.jsx
1757
1752
  - app/pb_kits/playbook/pb_table/docs/_table_sticky.md
1758
- - app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx
1759
- - app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md
1760
1753
  - app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb
1761
1754
  - app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx
1762
1755
  - app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md
1763
1756
  - app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md
1764
- - app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx
1765
- - app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md
1766
1757
  - app/pb_kits/playbook/pb_table/docs/_table_striped.html.erb
1767
1758
  - app/pb_kits/playbook/pb_table/docs/_table_striped.jsx
1768
1759
  - app/pb_kits/playbook/pb_table/docs/_table_striped.md
@@ -1,60 +0,0 @@
1
- import React from "react"
2
- import { AdvancedTable } from "playbook-ui"
3
- import MOCK_DATA from "./advanced_table_mock_data.json"
4
-
5
- const AdvancedTableColumnHeaders = (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
- accessor: "newEnrollments",
17
- label: "New Enrollments",
18
- },
19
- {
20
- accessor: "scheduledMeetings",
21
- label: "Scheduled Meetings",
22
- },
23
- ],
24
- },
25
- {
26
- label: "Performance Data",
27
- columns: [
28
- {
29
- accessor: "attendanceRate",
30
- label: "Attendance Rate",
31
- },
32
- {
33
- accessor: "completedClasses",
34
- label: "Completed Classes",
35
- },
36
- {
37
- accessor: "classCompletionRate",
38
- label: "Class Completion Rate",
39
- },
40
- {
41
- accessor: "graduatedStudents",
42
- label: "Graduated Students",
43
- },
44
- ],
45
- },
46
- ];
47
-
48
-
49
- return (
50
- <>
51
- <AdvancedTable
52
- columnDefinitions={columnDefinitions}
53
- tableData={MOCK_DATA}
54
- {...props}
55
- />
56
- </>
57
- )
58
- }
59
-
60
- export default AdvancedTableColumnHeaders
@@ -1 +0,0 @@
1
- Use a nested `columns` array in your columnDefinitions to create multiple header rows. Any column with `columns` is treated as a grouped header, and its child columns are displayed beneath it.
@@ -1,74 +0,0 @@
1
- import React from "react";
2
- import { AdvancedTable } from "playbook-ui";
3
- import MOCK_DATA from "./advanced_table_mock_data.json";
4
-
5
- const AdvancedTableColumnHeadersMultiple = (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
- },
22
- {
23
- accessor: "scheduledMeetings",
24
- label: "Scheduled Meetings",
25
- },
26
- ],
27
- },
28
- ],
29
- },
30
- {
31
- label: "Performance Data",
32
- columns: [
33
- {
34
- label: "Completion Metrics",
35
- columns: [
36
- {
37
- accessor: "completedClasses",
38
- label: "Completed Classes",
39
- },
40
- {
41
- accessor: "classCompletionRate",
42
- label: "Class Completion Rate",
43
- },
44
- ],
45
- },
46
- {
47
- label: "Attendance",
48
- columns: [
49
- {
50
- accessor: "attendanceRate",
51
- label: "Attendance Rate",
52
- },
53
- {
54
- accessor: "scheduledMeetings",
55
- label: "Scheduled Meetings",
56
- },
57
- ],
58
- },
59
- ],
60
- },
61
- ];
62
-
63
- return (
64
- <>
65
- <AdvancedTable
66
- columnDefinitions={columnDefinitions}
67
- tableData={MOCK_DATA}
68
- {...props}
69
- />
70
- </>
71
- );
72
- };
73
-
74
- export default AdvancedTableColumnHeadersMultiple;
@@ -1 +0,0 @@
1
- Multiple levels of column headers can also be rendered as seen here.
@@ -1 +0,0 @@
1
- The `link` prop accepts a string that is used as an href value and causes the button to act as a link. The default behavior of a link is to open in the current window. You can optionally alter the link behavior by adding the `newWindow` prop (boolean), which will open the link in a new window, or by calling the `target` prop, which accepts `_self`, `_blank`, `_parent`, `_top`, `child`, or any string, allowing you to specify any link target.
@@ -1,88 +0,0 @@
1
- import React from 'react'
2
- import Table from '../_table'
3
-
4
- const TableStickyColumns = () => {
5
- return (
6
- <Table
7
- responsive="scroll"
8
- size="md"
9
- stickyLeftColumn={["a"]}
10
- stickyRightColumn={["b"]}
11
- >
12
- <thead>
13
- <tr>
14
- <th id="a">{'Column 1'}</th>
15
- <th>{'Column 2'}</th>
16
- <th>{'Column 3'}</th>
17
- <th>{'Column 4'}</th>
18
- <th>{'Column 5'}</th>
19
- <th>{'Column 6'}</th>
20
- <th>{'Column 7'}</th>
21
- <th>{'Column 8'}</th>
22
- <th>{'Column 9'}</th>
23
- <th>{'Column 10'}</th>
24
- <th>{'Column 11'}</th>
25
- <th>{'Column 12'}</th>
26
- <th>{'Column 13'}</th>
27
- <th>{'Column 14'}</th>
28
- <th id="b">{'Column 15'}</th>
29
- </tr>
30
- </thead>
31
- <tbody>
32
- <tr>
33
- <td id="a">{'Value 1'}</td>
34
- <td>{'Value 2'}</td>
35
- <td>{'Value 3'}</td>
36
- <td>{'Value 4'}</td>
37
- <td>{'Value 5'}</td>
38
- <td>{'Value 6'}</td>
39
- <td>{'Value 7'}</td>
40
- <td>{'Value 8'}</td>
41
- <td>{'Value 9'}</td>
42
- <td>{'Value 10'}</td>
43
- <td>{'Value 11'}</td>
44
- <td>{'Value 12'}</td>
45
- <td>{'Value 13'}</td>
46
- <td>{'Value 14'}</td>
47
- <td id="b">{'Value 15'}</td>
48
- </tr>
49
- <tr>
50
- <td id="a">{'Value 1'}</td>
51
- <td>{'Value 2'}</td>
52
- <td>{'Value 3'}</td>
53
- <td>{'Value 4'}</td>
54
- <td>{'Value 5'}</td>
55
- <td>{'Value 6'}</td>
56
- <td>{'Value 7'}</td>
57
- <td>{'Value 8'}</td>
58
- <td>{'Value 9'}</td>
59
- <td>{'Value 10'}</td>
60
- <td>{'Value 11'}</td>
61
- <td>{'Value 12'}</td>
62
- <td>{'Value 13'}</td>
63
- <td>{'Value 14'}</td>
64
- <td id="b">{'Value 15'}</td>
65
- </tr>
66
- <tr>
67
- <td id="a">{'Value 1'}</td>
68
- <td>{'Value 2'}</td>
69
- <td>{'Value 3'}</td>
70
- <td>{'Value 4'}</td>
71
- <td>{'Value 5'}</td>
72
- <td>{'Value 6'}</td>
73
- <td>{'Value 7'}</td>
74
- <td>{'Value 8'}</td>
75
- <td>{'Value 9'}</td>
76
- <td>{'Value 10'}</td>
77
- <td>{'Value 11'}</td>
78
- <td>{'Value 12'}</td>
79
- <td>{'Value 13'}</td>
80
- <td>{'Value 14'}</td>
81
- <td id="b">{'Value 15'}</td>
82
- </tr>
83
- </tbody>
84
- </Table>
85
- )
86
- }
87
-
88
- export default TableStickyColumns
@@ -1,3 +0,0 @@
1
- The `stickyLeftColumn` and `stickyRightColumn` props can be used together on the same table as needed.
2
-
3
- Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.
@@ -1,87 +0,0 @@
1
- import React from 'react'
2
- import Table from '../_table'
3
-
4
- const TableStickyRightColumns = () => {
5
- return (
6
- <Table
7
- responsive="scroll"
8
- size="md"
9
- stickyRightColumn={["13", "14", "15"]}
10
- >
11
- <thead>
12
- <tr>
13
- <th>{'Column 1'}</th>
14
- <th>{'Column 2'}</th>
15
- <th>{'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 id="13">{'Column 13'}</th>
26
- <th id="14">{'Column 14'}</th>
27
- <th id="15">{'Column 15'}</th>
28
- </tr>
29
- </thead>
30
- <tbody>
31
- <tr>
32
- <td>{'Value 1'}</td>
33
- <td>{'Value 2'}</td>
34
- <td>{'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 id="13">{'Value 13'}</td>
45
- <td id="14">{'Value 14'}</td>
46
- <td id="15">{'Value 15'}</td>
47
- </tr>
48
- <tr>
49
- <td>{'Value 1'}</td>
50
- <td>{'Value 2'}</td>
51
- <td>{'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 id="13">{'Value 13'}</td>
62
- <td id="14">{'Value 14'}</td>
63
- <td id="15">{'Value 15'}</td>
64
- </tr>
65
- <tr>
66
- <td>{'Value 1'}</td>
67
- <td>{'Value 2'}</td>
68
- <td>{'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 id="13">{'Value 13'}</td>
79
- <td id="14">{'Value 14'}</td>
80
- <td id="15">{'Value 15'}</td>
81
- </tr>
82
- </tbody>
83
- </Table>
84
- )
85
- }
86
-
87
- export default TableStickyRightColumns
@@ -1,5 +0,0 @@
1
- The `stickyRightColumn` prop works in the same way as the above `stickyLeftColumn` prop. It expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
2
-
3
- If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
4
-
5
- Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyRightColumn` prop.