playbook_ui_docs 16.8.0.pre.alpha.PLAY3003websiteonlyiconboxsizing16656 → 16.8.0.pre.alpha.PLAY296916758

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.
Files changed (17) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_enable_toggle_expansion_rails.html.erb +62 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_enable_toggle_expansion_rails.md +7 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +12 -4
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +4 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +16 -2
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +4 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb +16 -2
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx +12 -5
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +4 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +5 -3
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
  13. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.jsx +2 -2
  14. data/app/pb_kits/playbook/pb_table/docs/_table_sticky.html.erb +85 -83
  15. data/app/pb_kits/playbook/pb_table/docs/_table_sticky.jsx +88 -86
  16. data/app/pb_kits/playbook/pb_table/docs/_table_sticky.md +3 -1
  17. metadata +4 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: d49b33967d5d8f09ab2c9d2bf358ce448d54ae8e7ffc7f77922b309a0128b994
4
- data.tar.gz: d5f81d9b32707f17f27fc7f3eba1115036dc08d56162e09da4bc6d59be8d3dfe
3
+ metadata.gz: 2743c713db8e6d3af75222f5619faf1b347765cf4542389fbe6a49613077b9a2
4
+ data.tar.gz: f8d687bf91edbc49088911fda1c85eee1b1a35a9271b7a5a739693e197f43b53
5
5
  SHA512:
6
- metadata.gz: f448b8b9721acb4245e860b653b61a4a6df1a5bf30177c1b12f2f5424a00edfcf8e611f1f9f4664ffe0efb72c49d3d6d021e3289880804b27d06ae0e18443c5c
7
- data.tar.gz: 44418e7bff92b3758c818d291d9b920e7c0c4f11929747199b2d4868e39b4fa456d9bb2bebf59d709d3f91e68935326c72e7d6052f506e1fc32ec1d530c57023
6
+ metadata.gz: 2fdbe3198ddc31c6f69bfaf7e6f3b7e5b6338c4fe8135dbb0082f35b8c62ab0082a19defec7081648efbfbf2173386090f7f398c7fbe9b40b11e0e39a20d83cc
7
+ data.tar.gz: 25f0d57ae65a91b9cfa8aebc814ef25c6d9ca98ae15d09a764efb7147c276df6c98f91306bd4a3b1c65bf6534b7c166fc4f3cbc5dd9038e085dc6a0f4978128a
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_enable_toggle_expansion_rails.html.erb ADDED
@@ -0,0 +1,62 @@
1
+ <%
2
+ column_definitions = [
3
+ {
4
+ accessor: "year",
5
+ label: "Year",
6
+ cellAccessors: ["quarter", "month", "day"],
7
+ },
8
+ {
9
+ accessor: "newEnrollments",
10
+ label: "New Enrollments",
11
+ },
12
+ {
13
+ accessor: "scheduledMeetings",
14
+ label: "Scheduled Meetings",
15
+ },
16
+ {
17
+ accessor: "attendanceRate",
18
+ label: "Attendance Rate",
19
+ },
20
+ {
21
+ accessor: "completedClasses",
22
+ label: "Completed Classes",
23
+ },
24
+ {
25
+ accessor: "classCompletionRate",
26
+ label: "Class Completion Rate",
27
+ },
28
+ {
29
+ accessor: "graduatedStudents",
30
+ label: "Graduated Students",
31
+ }
32
+ ]
33
+
34
+ subrow_headers = ["Quarter", "Month", "Day"]
35
+ %>
36
+
37
+ <%= pb_rails("title", props: { size: 4, text: "Normal Structure", margin_bottom: "sm" }) %>
38
+
39
+ <%= pb_rails("advanced_table", props: {
40
+ id: "enable-toggle-expansion-normal",
41
+ table_data: @table_data,
42
+ column_definitions: column_definitions,
43
+ enable_toggle_expansion: "all"
44
+ }) %>
45
+
46
+ <%= pb_rails("title", props: { size: 4, text: "Subcomponent Structure", margin_top: "lg", margin_bottom: "sm" }) %>
47
+
48
+ <%= pb_rails("advanced_table", props: { id: "enable-toggle-expansion-subcomponents" }) do %>
49
+ <%= pb_rails("advanced_table/table_header", props: {
50
+ table_id: "enable-toggle-expansion-subcomponents",
51
+ table_data: @table_data,
52
+ column_definitions: column_definitions,
53
+ enable_toggle_expansion: "all"
54
+ }) %>
55
+ <%= pb_rails("advanced_table/table_body", props: {
56
+ table_id: "enable-toggle-expansion-subcomponents",
57
+ table_data: @table_data,
58
+ column_definitions: column_definitions,
59
+ subrow_headers: subrow_headers,
60
+ enable_toggle_expansion: "all"
61
+ }) %>
62
+ <% end %>
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_enable_toggle_expansion_rails.md ADDED
@@ -0,0 +1,7 @@
1
+ `enable_toggle_expansion` controls where AdvancedTable renders toggle-all expansion controls. It accepts `"header"`, `"all"`, or `"none"` and defaults to `"header"`.
2
+
3
+ When using the normal Rails structure, pass `enable_toggle_expansion` to `advanced_table`. The parent kit renders its own `table_header` and `table_body`, so the prop is passed down automatically.
4
+
5
+ When using the Rails subcomponent structure, pass `enable_toggle_expansion` directly to the subcomponents that need it. `advanced_table/table_header` uses it for the table header toggle-all button. **NOTE**: you must pass `table_data` to `advanced_table/table_header` as well so it can detect whether expandable rows exist. `advanced_table/table_body` uses it for nested subrow header toggle controls, such as when `subrow_headers` is present.
6
+
7
+ Use `"all"` when you want toggle-all controls in both the table header and subrow headers. Use `"header"` when you only want the table header toggle-all control. Use `"none"` to suppress the header toggle-all control.
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx CHANGED
@@ -1,13 +1,21 @@
1
1
  import React from "react"
2
2
  import AdvancedTable from '../../pb_advanced_table/_advanced_table'
3
- import MOCK_DATA from "./advanced_table_mock_data.json"
3
+
4
+ const tableData = Array.from({ length: 15 }, (_, index) => ({
5
+ year: String(2020 + index),
6
+ newEnrollments: String(20 + index),
7
+ scheduledMeetings: String(10 + index),
8
+ attendanceRate: `${50 + index}%`,
9
+ completedClasses: String(3 + index),
10
+ classCompletionRate: `${30 + index}%`,
11
+ graduatedStudents: String(19 + index),
12
+ }))
4
13
 
5
14
  const AdvancedTableStickyHeader = (props) => {
6
15
  const columnDefinitions = [
7
16
  {
8
17
  accessor: "year",
9
18
  label: "Year",
10
- cellAccessors: ["quarter", "month", "day"],
11
19
  },
12
20
  {
13
21
  accessor: "newEnrollments",
@@ -40,11 +48,11 @@ const AdvancedTableStickyHeader = (props) => {
40
48
  }
41
49
 
42
50
  return (
43
- <div>
51
+ <div style={{ maxHeight: "320px", overflowY: "auto" }}>
44
52
  <AdvancedTable
45
53
  columnDefinitions={columnDefinitions}
46
54
  responsive="none"
47
- tableData={MOCK_DATA}
55
+ tableData={tableData}
48
56
  tableProps={tableProps}
49
57
  {...props}
50
58
  />
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md CHANGED
@@ -1,3 +1,7 @@
1
1
  The `TableProps` prop can also be used to render a sticky header for the Advanced Table.
2
2
 
3
+ This doc example uses a scroll container with flat rows so sticky behavior is visible in the docs without expanding subrows. Scroll inside the preview to see the header stick.
4
+
5
+ This example builds flat table data inline for the docs preview. For typical `tableData` setup, see [Default (Required Props)](/kits/advanced_table/default/react#advanced_table_default).
6
+
3
7
  This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "Sticky Header for Responsive Table" doc example below.
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb CHANGED
@@ -2,7 +2,6 @@
2
2
  {
3
3
  accessor: "year",
4
4
  label: "Year",
5
- cellAccessors: ["quarter", "month", "day"],
6
5
  },
7
6
  {
8
7
  accessor: "newEnrollments",
@@ -30,4 +29,19 @@
30
29
  }
31
30
  ] %>
32
31
 
33
- <%= pb_rails("advanced_table", props: { id: "sticky_header_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>
32
+ <% table_data = 15.times.map do |index|
33
+ {
34
+ year: (2020 + index).to_s,
35
+ id: (2020 + index).to_s,
36
+ newEnrollments: (20 + index).to_s,
37
+ scheduledMeetings: (10 + index).to_s,
38
+ attendanceRate: "#{50 + index}%",
39
+ completedClasses: (3 + index).to_s,
40
+ classCompletionRate: "#{30 + index}%",
41
+ graduatedStudents: (19 + index).to_s,
42
+ }
43
+ end %>
44
+
45
+ <div style="max-height: 320px; overflow-y: auto;">
46
+ <%= pb_rails("advanced_table", props: { id: "sticky_header_table", table_data: table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>
47
+ </div>
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md CHANGED
@@ -1,3 +1,7 @@
1
1
  The `table_props` prop can also be used to render a sticky header for the Advanced Table.
2
2
 
3
+ This doc example uses a scroll container with flat rows so sticky behavior is visible in the docs without expanding subrows. Scroll inside the preview to see the header stick.
4
+
5
+ This example builds flat table data inline for the docs preview. For typical `table_data` setup, see [Default (Required Props)](/kits/advanced_table/default/rails#advanced_table_beta).
6
+
3
7
  This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "[Sticky Header for Responsive Table](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header-for-responsive-table)" doc example below.
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb CHANGED
@@ -2,7 +2,6 @@
2
2
  {
3
3
  accessor: "year",
4
4
  label: "Year",
5
- cellAccessors: ["quarter", "month", "day"],
6
5
  },
7
6
  {
8
7
  accessor: "newEnrollments",
@@ -30,4 +29,19 @@
30
29
  }
31
30
  ] %>
32
31
 
33
- <%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>
32
+ <% table_data = 15.times.map do |index|
33
+ {
34
+ year: (2020 + index).to_s,
35
+ id: (2020 + index).to_s,
36
+ newEnrollments: (20 + index).to_s,
37
+ scheduledMeetings: (10 + index).to_s,
38
+ attendanceRate: "#{50 + index}%",
39
+ completedClasses: (3 + index).to_s,
40
+ classCompletionRate: "#{30 + index}%",
41
+ graduatedStudents: (19 + index).to_s,
42
+ }
43
+ end %>
44
+
45
+ <div style="max-height: 320px; overflow-y: auto;">
46
+ <%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: table_data, column_definitions: column_definitions, table_props: { sticky: true }}) %>
47
+ </div>
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx CHANGED
@@ -1,13 +1,21 @@
1
1
  import React from "react"
2
2
  import AdvancedTable from '../../pb_advanced_table/_advanced_table'
3
- import MOCK_DATA from "./advanced_table_mock_data.json"
3
+
4
+ const tableData = Array.from({ length: 15 }, (_, index) => ({
5
+ year: String(2020 + index),
6
+ newEnrollments: String(20 + index),
7
+ scheduledMeetings: String(10 + index),
8
+ attendanceRate: `${50 + index}%`,
9
+ completedClasses: String(3 + index),
10
+ classCompletionRate: `${30 + index}%`,
11
+ graduatedStudents: String(19 + index),
12
+ }))
4
13
 
5
14
  const AdvancedTableTablePropsStickyHeader = (props) => {
6
15
  const columnDefinitions = [
7
16
  {
8
17
  accessor: "year",
9
18
  label: "Year",
10
- cellAccessors: ["quarter", "month", "day"],
11
19
  },
12
20
  {
13
21
  accessor: "newEnrollments",
@@ -40,11 +48,10 @@ const AdvancedTableTablePropsStickyHeader = (props) => {
40
48
  }
41
49
 
42
50
  return (
43
- <div>
51
+ <div style={{ maxHeight: "320px", overflowY: "auto" }}>
44
52
  <AdvancedTable
45
53
  columnDefinitions={columnDefinitions}
46
- maxHeight="xs"
47
- tableData={MOCK_DATA}
54
+ tableData={tableData}
48
55
  tableProps={tableProps}
49
56
  {...props}
50
57
  />
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md CHANGED
@@ -2,6 +2,10 @@ Create a sticky header that works for responsive Advanced Tables by setting `sti
2
2
 
3
3
  **NOTE**: This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
4
4
 
5
+ Scroll inside the table preview to see the header stick.
6
+
7
+ This example builds flat table data inline for the docs preview. For typical `table_data` setup, see [Default (Required Props)](/kits/advanced_table/default/rails#advanced_table_beta).
8
+
5
9
  Expand the table above to see this in action.
6
10
 
7
11
  A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#sticky-header) doc example above.
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md CHANGED
@@ -1,7 +1,9 @@
1
- Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/global_props/max_height) global prop.
1
+ Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and wrapping the table in a scroll container (or using `maxHeight`).
2
2
 
3
- **NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
3
+ **NOTE**: The header is sticky within the table scroll area. The live example uses flat rows so you can scroll inside the preview without expanding subrows.
4
4
 
5
- Expand the table above to see this in action.
5
+ This example builds flat table data inline for the docs preview. For typical `tableData` setup, see [Default (Required Props)](/kits/advanced_table/default/react#advanced_table_default).
6
+
7
+ Expand the table above to see responsive behavior in action.
6
8
 
7
9
  A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header) doc example above.
data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml CHANGED
@@ -3,6 +3,7 @@ examples:
3
3
  - advanced_table_beta: Default (Required Props)
4
4
  - advanced_table_loading: Loading State
5
5
  - advanced_table_beta_subrow_headers: SubRow Headers
6
+ - advanced_table_enable_toggle_expansion_rails: Enable Toggle Expansion
6
7
  - advanced_table_collapsible_trail_rails: Collapsible Trail
7
8
  - advanced_table_table_props: Table Props
8
9
  - advanced_table_sticky_header_rails: Sticky Header
data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.jsx CHANGED
@@ -36,10 +36,10 @@ const DatePickerDialogSubmission = () => {
36
36
  <Dialog.Body>
37
37
  <DatePicker
38
38
  defaultDate={dateFixed || undefined}
39
- key={`fixed-${pickerInstance}`}
39
+ key={"fixed-" + pickerInstance}
40
40
  label="Date"
41
41
  onChange={(dateStr) => setDateFixed(dateStr || "")}
42
- pickerId={`datePickerFixed-${pickerInstance}`}
42
+ pickerId={"datePickerFixed-" + pickerInstance}
43
43
  staticPosition={false}
44
44
  />
45
45
  </Dialog.Body>
data/app/pb_kits/playbook/pb_table/docs/_table_sticky.html.erb CHANGED
@@ -1,83 +1,85 @@
1
- <%= pb_rails("table", props: { sticky: true }) do %>
2
- <thead>
3
- <tr>
4
- <th>Column 1</th>
5
- <th>Column 2</th>
6
- <th>Column 3</th>
7
- <th>Column 4</th>
8
- <th>Column 5</th>
9
- </tr>
10
- </thead>
11
- <tbody>
12
- <tr>
13
- <td>Value 1</td>
14
- <td>Value 2</td>
15
- <td>Value 3</td>
16
- <td>Value 4</td>
17
- <td>Value 5</td>
18
- </tr>
19
- <tr>
20
- <td>Value 1</td>
21
- <td>Value 2</td>
22
- <td>Value 3</td>
23
- <td>Value 4</td>
24
- <td>Value 5</td>
25
- </tr>
26
- <tr>
27
- <td>Value 1</td>
28
- <td>Value 2</td>
29
- <td>Value 3</td>
30
- <td>Value 4</td>
31
- <td>Value 5</td>
32
- </tr>
33
- <tr>
34
- <td>Value 1</td>
35
- <td>Value 2</td>
36
- <td>Value 3</td>
37
- <td>Value 4</td>
38
- <td>Value 5</td>
39
- </tr>
40
- <tr>
41
- <td>Value 1</td>
42
- <td>Value 2</td>
43
- <td>Value 3</td>
44
- <td>Value 4</td>
45
- <td>Value 5</td>
46
- </tr>
47
- <tr>
48
- <td>Value 1</td>
49
- <td>Value 2</td>
50
- <td>Value 3</td>
51
- <td>Value 4</td>
52
- <td>Value 5</td>
53
- </tr>
54
- <tr>
55
- <td>Value 1</td>
56
- <td>Value 2</td>
57
- <td>Value 3</td>
58
- <td>Value 4</td>
59
- <td>Value 5</td>
60
- </tr>
61
- <tr>
62
- <td>Value 1</td>
63
- <td>Value 2</td>
64
- <td>Value 3</td>
65
- <td>Value 4</td>
66
- <td>Value 5</td>
67
- </tr>
68
- <tr>
69
- <td>Value 1</td>
70
- <td>Value 2</td>
71
- <td>Value 3</td>
72
- <td>Value 4</td>
73
- <td>Value 5</td>
74
- </tr>
75
- <tr>
76
- <td>Value 1</td>
77
- <td>Value 2</td>
78
- <td>Value 3</td>
79
- <td>Value 4</td>
80
- <td>Value 5</td>
81
- </tr>
82
- </tbody>
83
- <% end %>
1
+ <div style="max-height: 320px; overflow-y: auto;">
2
+ <%= pb_rails("table", props: { sticky: true }) do %>
3
+ <thead>
4
+ <tr>
5
+ <th>Column 1</th>
6
+ <th>Column 2</th>
7
+ <th>Column 3</th>
8
+ <th>Column 4</th>
9
+ <th>Column 5</th>
10
+ </tr>
11
+ </thead>
12
+ <tbody>
13
+ <tr>
14
+ <td>Value 1</td>
15
+ <td>Value 2</td>
16
+ <td>Value 3</td>
17
+ <td>Value 4</td>
18
+ <td>Value 5</td>
19
+ </tr>
20
+ <tr>
21
+ <td>Value 1</td>
22
+ <td>Value 2</td>
23
+ <td>Value 3</td>
24
+ <td>Value 4</td>
25
+ <td>Value 5</td>
26
+ </tr>
27
+ <tr>
28
+ <td>Value 1</td>
29
+ <td>Value 2</td>
30
+ <td>Value 3</td>
31
+ <td>Value 4</td>
32
+ <td>Value 5</td>
33
+ </tr>
34
+ <tr>
35
+ <td>Value 1</td>
36
+ <td>Value 2</td>
37
+ <td>Value 3</td>
38
+ <td>Value 4</td>
39
+ <td>Value 5</td>
40
+ </tr>
41
+ <tr>
42
+ <td>Value 1</td>
43
+ <td>Value 2</td>
44
+ <td>Value 3</td>
45
+ <td>Value 4</td>
46
+ <td>Value 5</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
+ </tr>
55
+ <tr>
56
+ <td>Value 1</td>
57
+ <td>Value 2</td>
58
+ <td>Value 3</td>
59
+ <td>Value 4</td>
60
+ <td>Value 5</td>
61
+ </tr>
62
+ <tr>
63
+ <td>Value 1</td>
64
+ <td>Value 2</td>
65
+ <td>Value 3</td>
66
+ <td>Value 4</td>
67
+ <td>Value 5</td>
68
+ </tr>
69
+ <tr>
70
+ <td>Value 1</td>
71
+ <td>Value 2</td>
72
+ <td>Value 3</td>
73
+ <td>Value 4</td>
74
+ <td>Value 5</td>
75
+ </tr>
76
+ <tr>
77
+ <td>Value 1</td>
78
+ <td>Value 2</td>
79
+ <td>Value 3</td>
80
+ <td>Value 4</td>
81
+ <td>Value 5</td>
82
+ </tr>
83
+ </tbody>
84
+ <% end %>
85
+ </div>
data/app/pb_kits/playbook/pb_table/docs/_table_sticky.jsx CHANGED
@@ -3,92 +3,94 @@ import React from "react"
3
3
  import Table from "../_table"
4
4
 
5
5
  const TableSticky = (props) => (
6
- <Table
7
- sticky
8
- {...props}
9
- >
10
- <thead>
11
- <tr>
12
- <th>{'Column 1'}</th>
13
- <th>{'Column 2'}</th>
14
- <th>{'Column 3'}</th>
15
- <th>{'Column 4'}</th>
16
- <th>{'Column 5'}</th>
17
- </tr>
18
- </thead>
19
- <tbody>
20
- <tr>
21
- <td>{'Value 1'}</td>
22
- <td>{'Value 2'}</td>
23
- <td>{'Value 3'}</td>
24
- <td>{'Value 4'}</td>
25
- <td>{'Value 5'}</td>
26
- </tr>
27
- <tr>
28
- <td>{'Value 1'}</td>
29
- <td>{'Value 2'}</td>
30
- <td>{'Value 3'}</td>
31
- <td>{'Value 4'}</td>
32
- <td>{'Value 5'}</td>
33
- </tr>
34
- <tr>
35
- <td>{'Value 1'}</td>
36
- <td>{'Value 2'}</td>
37
- <td>{'Value 3'}</td>
38
- <td>{'Value 4'}</td>
39
- <td>{'Value 5'}</td>
40
- </tr>
41
- <tr>
42
- <td>{'Value 1'}</td>
43
- <td>{'Value 2'}</td>
44
- <td>{'Value 3'}</td>
45
- <td>{'Value 4'}</td>
46
- <td>{'Value 5'}</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
- </tr>
55
- <tr>
56
- <td>{'Value 1'}</td>
57
- <td>{'Value 2'}</td>
58
- <td>{'Value 3'}</td>
59
- <td>{'Value 4'}</td>
60
- <td>{'Value 5'}</td>
61
- </tr>
62
- <tr>
63
- <td>{'Value 1'}</td>
64
- <td>{'Value 2'}</td>
65
- <td>{'Value 3'}</td>
66
- <td>{'Value 4'}</td>
67
- <td>{'Value 5'}</td>
68
- </tr>
69
- <tr>
70
- <td>{'Value 1'}</td>
71
- <td>{'Value 2'}</td>
72
- <td>{'Value 3'}</td>
73
- <td>{'Value 4'}</td>
74
- <td>{'Value 5'}</td>
75
- </tr>
76
- <tr>
77
- <td>{'Value 1'}</td>
78
- <td>{'Value 2'}</td>
79
- <td>{'Value 3'}</td>
80
- <td>{'Value 4'}</td>
81
- <td>{'Value 5'}</td>
82
- </tr>
83
- <tr>
84
- <td>{'Value 1'}</td>
85
- <td>{'Value 2'}</td>
86
- <td>{'Value 3'}</td>
87
- <td>{'Value 4'}</td>
88
- <td>{'Value 5'}</td>
89
- </tr>
90
- </tbody>
91
- </Table>
6
+ <div style={{ maxHeight: "320px", overflowY: "auto" }}>
7
+ <Table
8
+ sticky
9
+ {...props}
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
+ </tr>
19
+ </thead>
20
+ <tbody>
21
+ <tr>
22
+ <td>{'Value 1'}</td>
23
+ <td>{'Value 2'}</td>
24
+ <td>{'Value 3'}</td>
25
+ <td>{'Value 4'}</td>
26
+ <td>{'Value 5'}</td>
27
+ </tr>
28
+ <tr>
29
+ <td>{'Value 1'}</td>
30
+ <td>{'Value 2'}</td>
31
+ <td>{'Value 3'}</td>
32
+ <td>{'Value 4'}</td>
33
+ <td>{'Value 5'}</td>
34
+ </tr>
35
+ <tr>
36
+ <td>{'Value 1'}</td>
37
+ <td>{'Value 2'}</td>
38
+ <td>{'Value 3'}</td>
39
+ <td>{'Value 4'}</td>
40
+ <td>{'Value 5'}</td>
41
+ </tr>
42
+ <tr>
43
+ <td>{'Value 1'}</td>
44
+ <td>{'Value 2'}</td>
45
+ <td>{'Value 3'}</td>
46
+ <td>{'Value 4'}</td>
47
+ <td>{'Value 5'}</td>
48
+ </tr>
49
+ <tr>
50
+ <td>{'Value 1'}</td>
51
+ <td>{'Value 2'}</td>
52
+ <td>{'Value 3'}</td>
53
+ <td>{'Value 4'}</td>
54
+ <td>{'Value 5'}</td>
55
+ </tr>
56
+ <tr>
57
+ <td>{'Value 1'}</td>
58
+ <td>{'Value 2'}</td>
59
+ <td>{'Value 3'}</td>
60
+ <td>{'Value 4'}</td>
61
+ <td>{'Value 5'}</td>
62
+ </tr>
63
+ <tr>
64
+ <td>{'Value 1'}</td>
65
+ <td>{'Value 2'}</td>
66
+ <td>{'Value 3'}</td>
67
+ <td>{'Value 4'}</td>
68
+ <td>{'Value 5'}</td>
69
+ </tr>
70
+ <tr>
71
+ <td>{'Value 1'}</td>
72
+ <td>{'Value 2'}</td>
73
+ <td>{'Value 3'}</td>
74
+ <td>{'Value 4'}</td>
75
+ <td>{'Value 5'}</td>
76
+ </tr>
77
+ <tr>
78
+ <td>{'Value 1'}</td>
79
+ <td>{'Value 2'}</td>
80
+ <td>{'Value 3'}</td>
81
+ <td>{'Value 4'}</td>
82
+ <td>{'Value 5'}</td>
83
+ </tr>
84
+ <tr>
85
+ <td>{'Value 1'}</td>
86
+ <td>{'Value 2'}</td>
87
+ <td>{'Value 3'}</td>
88
+ <td>{'Value 4'}</td>
89
+ <td>{'Value 5'}</td>
90
+ </tr>
91
+ </tbody>
92
+ </Table>
93
+ </div>
92
94
  )
93
95
 
94
96
  export default TableSticky
data/app/pb_kits/playbook/pb_table/docs/_table_sticky.md CHANGED
@@ -2,7 +2,9 @@ React: Use `sticky` on a table to allow the table header to be fixed in place wh
2
2
 
3
3
  Rails: Pass `sticky: true` to props.
4
4
 
5
- If the table header is not sticking in the right place you will need to pass a inline `top` style to the `thead`.
5
+ The live example uses a scroll container so sticky behavior is visible in the docs. Scroll inside the preview to see it.
6
+
7
+ If the table header is not sticking in the right place you will need to pass an inline `top` style to the `thead`. This is often needed when a parent adds padding above the table.
6
8
  React Example: `<thead style={{ top: "-16px" }}>`
7
9
  Rails Example: `<thead style="top: -16px">`
8
10
 
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: 16.8.0.pre.alpha.PLAY3003websiteonlyiconboxsizing16656
4
+ version: 16.8.0.pre.alpha.PLAY296916758
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: 2026-05-28 00:00:00.000000000 Z
12
+ date: 2026-06-01 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -94,6 +94,8 @@ files:
94
94
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md
95
95
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx
96
96
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
97
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_enable_toggle_expansion_rails.html.erb
98
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_enable_toggle_expansion_rails.md
97
99
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx
98
100
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md
99
101
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx