playbook_ui 14.17.0.pre.alpha.PLAY20267223 → 14.17.0.pre.alpha.PLAY20547307
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/Components/TableHeaderCell.tsx +49 -2
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +1 -2
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +29 -19
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx +65 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md +9 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx +64 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +8 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +55 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +33 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +6 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +6 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +6 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +4 -1
- data/app/pb_kits/playbook/pb_background/_background.scss +26 -0
- data/app/pb_kits/playbook/pb_background/_background.tsx +5 -3
- data/app/pb_kits/playbook/pb_background/background.test.js +5 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx +35 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md +1 -0
- data/app/pb_kits/playbook/pb_background/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_background/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +19 -45
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +54 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +3 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts +45 -0
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
- data/app/pb_kits/playbook/pb_form_group/_form_group.scss +18 -2
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +15 -5
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +20 -5
- data/app/pb_kits/playbook/pb_layout/_layout.scss +70 -1
- data/app/pb_kits/playbook/pb_layout/_layout.tsx +29 -2
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +322 -118
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
- data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +74 -43
- data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +79 -0
- data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +21 -4
- data/app/pb_kits/playbook/pb_overlay/_overlay.scss +49 -22
- data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +15 -4
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx +63 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md +3 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +1 -7
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx +39 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx +40 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md +5 -0
- data/app/pb_kits/playbook/pb_overlay/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_overlay/docs/index.js +3 -0
- data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx +39 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb +36 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +1 -1
- data/app/pb_kits/playbook/pb_table/table.rb +13 -1
- data/app/pb_kits/playbook/pb_table/table_header.rb +13 -1
- data/dist/chunks/_typeahead-DytFGjSn.js +22 -0
- data/dist/chunks/_weekday_stacked-B7twaUlt.js +45 -0
- data/dist/chunks/lib-Cj4H6j1c.js +29 -0
- data/dist/chunks/{pb_form_validation-BvNy9Bd6.js → pb_form_validation-Bx1OK6xs.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +30 -6
- data/dist/chunks/_typeahead-HqfDnjRe.js +0 -22
- data/dist/chunks/_weekday_stacked-CPNaHtxQ.js +0 -45
- data/dist/chunks/lib-BGzBzFZX.js +0 -29
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 06c3be1f56543c7c3eaaa61b499fcd468b2d949490d1e63a9633466889d2a82f
|
4
|
+
data.tar.gz: 40597dc6319352c9362e3f165228a93daa9adbe5853f3145581d038eb58a09b7
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: f013f65db3bc6a708f1009b8103d8da9f1dd0bd762b18a5c48dc8745160955249ea53ea784496257401ee0820499a441514f758d5ae6709aa928de5b1dee4a73
|
7
|
+
data.tar.gz: bf8c87674cbf08d0b905a6c2b769c373c1d63c23a968010950ca1d35449cbe91c7e06a282f909244c9abcba56b2186812c38a9083ed0dca60446f354bde86dcb
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React, { useContext } from "react"
|
2
2
|
import classnames from "classnames"
|
3
|
-
import { flexRender, Header, Table } from "@tanstack/react-table"
|
3
|
+
import { flexRender, Header, Table, RowModel } from "@tanstack/react-table"
|
4
4
|
|
5
5
|
import { GenericObject } from "../../types"
|
6
6
|
|
@@ -8,9 +8,16 @@ import { GlobalProps } from "../../utilities/globalProps"
|
|
8
8
|
|
9
9
|
import Flex from "../../pb_flex/_flex"
|
10
10
|
import Checkbox from "../../pb_checkbox/_checkbox"
|
11
|
+
import Dropdown from "../../pb_dropdown/_dropdown"
|
12
|
+
import DropdownTrigger from "../../pb_dropdown/subcomponents/DropdownTrigger"
|
13
|
+
import DropdownOption from "../../pb_dropdown/subcomponents/DropdownOption"
|
14
|
+
import DropdownContainer from "../../pb_dropdown/subcomponents/DropdownContainer"
|
15
|
+
import Icon from "../../pb_icon/_icon"
|
11
16
|
|
12
17
|
import { SortIconButton } from "./SortIconButton"
|
13
18
|
import { ToggleIconButton } from "./ToggleIconButton"
|
19
|
+
import { displayIcon } from "../Utilities/IconHelpers"
|
20
|
+
import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers"
|
14
21
|
|
15
22
|
import { isChrome } from "../Utilities/BrowserCheck"
|
16
23
|
|
@@ -40,6 +47,10 @@ export const TableHeaderCell = ({
|
|
40
47
|
table
|
41
48
|
}: TableHeaderCellProps) => {
|
42
49
|
const {
|
50
|
+
expanded,
|
51
|
+
setExpanded,
|
52
|
+
expandByDepth,
|
53
|
+
toggleExpansionIcon,
|
43
54
|
sortControl,
|
44
55
|
responsive,
|
45
56
|
selectableRows,
|
@@ -107,6 +118,17 @@ const isToggleExpansionEnabled =
|
|
107
118
|
justifyHeader = isLeafColumn ? "end" : "center";
|
108
119
|
}
|
109
120
|
|
121
|
+
const handleExpandDepth = (depth: number) => {
|
122
|
+
const updated = updateExpandAndCollapseState(
|
123
|
+
table.getRowModel(),
|
124
|
+
expanded,
|
125
|
+
undefined,
|
126
|
+
depth
|
127
|
+
)
|
128
|
+
setExpanded(updated)
|
129
|
+
}
|
130
|
+
|
131
|
+
|
110
132
|
return (
|
111
133
|
<th
|
112
134
|
align="right"
|
@@ -143,9 +165,34 @@ const isToggleExpansionEnabled =
|
|
143
165
|
/>
|
144
166
|
)
|
145
167
|
}
|
146
|
-
{isToggleExpansionEnabled && hasAnySubRows && (
|
168
|
+
{isToggleExpansionEnabled && hasAnySubRows && !expandByDepth && (
|
147
169
|
<ToggleIconButton onClick={handleExpandOrCollapse} />
|
148
170
|
)}
|
171
|
+
{isToggleExpansionEnabled && hasAnySubRows && expandByDepth && (
|
172
|
+
<Dropdown options={expandByDepth}>
|
173
|
+
<DropdownTrigger className="gray-icon toggle-all-icon">
|
174
|
+
<Icon icon={displayIcon(toggleExpansionIcon)[0]} />
|
175
|
+
</DropdownTrigger>
|
176
|
+
<DropdownContainer className="expand-by-depth-dropdown">
|
177
|
+
{expandByDepth.map((option:{ [key: string]: any }, index: number) => (
|
178
|
+
<DropdownOption
|
179
|
+
key={index}
|
180
|
+
option={option}
|
181
|
+
padding="none"
|
182
|
+
>
|
183
|
+
<Flex
|
184
|
+
alignItems="center"
|
185
|
+
htmlOptions={{onClick: () => {handleExpandDepth(option.depth)} }}
|
186
|
+
paddingX="sm"
|
187
|
+
paddingY="xs"
|
188
|
+
>
|
189
|
+
{option.label}
|
190
|
+
</Flex>
|
191
|
+
</DropdownOption>
|
192
|
+
))}
|
193
|
+
</DropdownContainer>
|
194
|
+
</Dropdown>
|
195
|
+
)}
|
149
196
|
|
150
197
|
{isToggleExpansionEnabledLoading &&(
|
151
198
|
<div className="loading-toggle-icon header-toggle-icon" />
|
@@ -22,10 +22,9 @@ export function useTableActions({
|
|
22
22
|
// Handle expand/collapse
|
23
23
|
const handleExpandOrCollapse = useCallback(async (row: Row<GenericObject>) => {
|
24
24
|
onToggleExpansionClick && onToggleExpansionClick(row);
|
25
|
-
|
26
25
|
const expandedState = expanded;
|
27
26
|
const targetParent = row?.parentId;
|
28
|
-
const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent);
|
27
|
+
const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent, undefined);
|
29
28
|
setExpanded(updatedRows);
|
30
29
|
}, [expanded, setExpanded, onToggleExpansionClick, table]);
|
31
30
|
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { RowModel } from "@tanstack/react-table"
|
1
|
+
import { RowModel, Row } from "@tanstack/react-table"
|
2
2
|
import { ExpandedStateObject } from "./types"
|
3
3
|
import { GenericObject } from "../../types"
|
4
4
|
|
@@ -14,30 +14,40 @@ const filterExpandableRows = (expandedState: Record<string, boolean>) => {
|
|
14
14
|
export const updateExpandAndCollapseState = (
|
15
15
|
tableRows: RowModel<GenericObject>,
|
16
16
|
expanded: Record<string, boolean>,
|
17
|
-
targetParent
|
17
|
+
targetParent?: string,
|
18
|
+
targetDepth?: number,
|
18
19
|
) => {
|
19
20
|
const updateExpandedRows: Record<string, boolean> = {};
|
20
|
-
const rows = tableRows.rows;
|
21
|
+
const rows = targetDepth !== undefined ? tableRows.flatRows : tableRows.rows;
|
21
22
|
|
22
|
-
|
23
|
-
const areRowsExpanded = new Set<boolean>();
|
23
|
+
const rowsToToggle: Row<GenericObject>[] = [];
|
24
24
|
|
25
25
|
for (const row of rows) {
|
26
|
-
const shouldBeUpdated =
|
27
|
-
|
26
|
+
const shouldBeUpdated =
|
27
|
+
targetDepth !== undefined
|
28
|
+
? row.depth <= targetDepth
|
29
|
+
: targetParent === undefined
|
30
|
+
? row.depth === 0
|
31
|
+
: targetParent === row.parentId;
|
32
|
+
|
28
33
|
if (shouldBeUpdated) {
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
34
|
+
rowsToToggle.push(row);
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
38
|
+
// Check if we are expanding or collapsing
|
39
|
+
const anyCollapsed = rowsToToggle.some((row) => !row.getIsExpanded());
|
40
|
+
const isExpandAction = anyCollapsed;
|
41
|
+
|
42
|
+
|
43
|
+
for (const row of rowsToToggle) {
|
44
|
+
const shouldUpdate =
|
45
|
+
isExpandAction || targetDepth === undefined
|
46
|
+
? true
|
47
|
+
: row.depth === targetDepth;
|
48
|
+
|
49
|
+
if (shouldUpdate) {
|
50
|
+
updateExpandedRows[row.id] = isExpandAction;
|
41
51
|
}
|
42
52
|
}
|
43
53
|
|
@@ -38,6 +38,7 @@ type AdvancedTableProps = {
|
|
38
38
|
data?: { [key: string]: string }
|
39
39
|
enableToggleExpansion?: "all" | "header" | "none"
|
40
40
|
expandedControl?: GenericObject
|
41
|
+
expandByDepth?: { [key: string]: string | number }
|
41
42
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
42
43
|
id?: string
|
43
44
|
initialLoadingRowsCount?: number
|
@@ -73,6 +74,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
73
74
|
data = {},
|
74
75
|
enableToggleExpansion = "header",
|
75
76
|
expandedControl,
|
77
|
+
expandByDepth,
|
76
78
|
htmlOptions = {},
|
77
79
|
id,
|
78
80
|
initialLoadingRowsCount = 10,
|
@@ -280,6 +282,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
280
282
|
columnDefinitions={columnDefinitions}
|
281
283
|
enableToggleExpansion={enableToggleExpansion}
|
282
284
|
enableVirtualization={virtualizedRows}
|
285
|
+
expandByDepth={expandByDepth}
|
283
286
|
expanded={expanded}
|
284
287
|
expandedControl={expandedControl}
|
285
288
|
handleExpandOrCollapse={handleExpandOrCollapse}
|
@@ -0,0 +1,65 @@
|
|
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 AdvancedTableExpandByDepth = (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
|
+
},
|
16
|
+
{
|
17
|
+
accessor: "scheduledMeetings",
|
18
|
+
label: "Scheduled Meetings",
|
19
|
+
},
|
20
|
+
{
|
21
|
+
accessor: "attendanceRate",
|
22
|
+
label: "Attendance Rate",
|
23
|
+
},
|
24
|
+
{
|
25
|
+
accessor: "completedClasses",
|
26
|
+
label: "Completed Classes",
|
27
|
+
},
|
28
|
+
{
|
29
|
+
accessor: "classCompletionRate",
|
30
|
+
label: "Class Completion Rate",
|
31
|
+
},
|
32
|
+
{
|
33
|
+
accessor: "graduatedStudents",
|
34
|
+
label: "Graduated Students",
|
35
|
+
},
|
36
|
+
]
|
37
|
+
|
38
|
+
const expandByDepth = [
|
39
|
+
{
|
40
|
+
depth: 0,
|
41
|
+
label: "Year",
|
42
|
+
},
|
43
|
+
{
|
44
|
+
depth: 1,
|
45
|
+
label: "Quarter",
|
46
|
+
},
|
47
|
+
{
|
48
|
+
depth: 2,
|
49
|
+
label: "Month",
|
50
|
+
}
|
51
|
+
]
|
52
|
+
|
53
|
+
return (
|
54
|
+
<div>
|
55
|
+
<AdvancedTable
|
56
|
+
columnDefinitions={columnDefinitions}
|
57
|
+
expandByDepth={expandByDepth}
|
58
|
+
tableData={MOCK_DATA}
|
59
|
+
{...props}
|
60
|
+
/>
|
61
|
+
</div>
|
62
|
+
)
|
63
|
+
}
|
64
|
+
|
65
|
+
export default AdvancedTableExpandByDepth
|
@@ -0,0 +1,9 @@
|
|
1
|
+
The `expandByDepth` prop enables users to expand or collapse table rows by specific levels of nesting. When provided, it renders a dropdown that appears when the toggle icon in the header is clicked.
|
2
|
+
|
3
|
+
`expandByDepth` accepts an array of objects, where each object defines the depth level to target and the label to display in the dropdown. When a user selects an option:
|
4
|
+
|
5
|
+
**Expanding a depth**: Expands all rows at the selected depth AND all parent levels above it (if parent levels were closed), ensuring nested content is visible.
|
6
|
+
|
7
|
+
**Collapsing a depth**: Only collapses rows at the selected depth, keeping parent rows expanded for context.
|
8
|
+
|
9
|
+
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx
ADDED
@@ -0,0 +1,64 @@
|
|
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 AdvancedTableStickyColumnsAndHeader = (props) => {
|
6
|
+
const columnDefinitions = [
|
7
|
+
{
|
8
|
+
accessor: "year",
|
9
|
+
label: "Year",
|
10
|
+
id: "year",
|
11
|
+
cellAccessors: ["quarter", "month", "day"],
|
12
|
+
},
|
13
|
+
{
|
14
|
+
accessor: "newEnrollments",
|
15
|
+
label: "New Enrollments",
|
16
|
+
id: "newEnrollments",
|
17
|
+
},
|
18
|
+
{
|
19
|
+
accessor: "scheduledMeetings",
|
20
|
+
label: "Scheduled Meetings",
|
21
|
+
id: "scheduledMeetings",
|
22
|
+
},
|
23
|
+
{
|
24
|
+
accessor: "attendanceRate",
|
25
|
+
label: "Attendance Rate",
|
26
|
+
id: "attendanceRate",
|
27
|
+
},
|
28
|
+
{
|
29
|
+
accessor: "completedClasses",
|
30
|
+
label: "Completed Classes",
|
31
|
+
id: "completedClasses",
|
32
|
+
},
|
33
|
+
{
|
34
|
+
accessor: "classCompletionRate",
|
35
|
+
label: "Class Completion Rate",
|
36
|
+
id: "classCompletionRate",
|
37
|
+
},
|
38
|
+
{
|
39
|
+
accessor: "graduatedStudents",
|
40
|
+
label: "Graduated Students",
|
41
|
+
id: "graduatedStudents",
|
42
|
+
},
|
43
|
+
]
|
44
|
+
|
45
|
+
const tableProps = {
|
46
|
+
sticky: true
|
47
|
+
}
|
48
|
+
|
49
|
+
return (
|
50
|
+
<div>
|
51
|
+
<AdvancedTable
|
52
|
+
columnDefinitions={columnDefinitions}
|
53
|
+
maxHeight="xs"
|
54
|
+
responsive="none"
|
55
|
+
stickyLeftColumn={["year"]}
|
56
|
+
tableData={MOCK_DATA}
|
57
|
+
tableProps={tableProps}
|
58
|
+
{...props}
|
59
|
+
/>
|
60
|
+
</div>
|
61
|
+
)
|
62
|
+
}
|
63
|
+
|
64
|
+
export default AdvancedTableStickyColumnsAndHeader
|
@@ -0,0 +1,8 @@
|
|
1
|
+
To achieve a sticky header AND sticky columns together, in addition to the `stickyLeftColumn` logic outlined above, you can:
|
2
|
+
|
3
|
+
- Set `sticky: true` via `tableProps`
|
4
|
+
- Give the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop.
|
5
|
+
|
6
|
+
**NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the column stickiness.
|
7
|
+
|
8
|
+
Expand the table above to see this in action.
|
@@ -0,0 +1,55 @@
|
|
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 AdvancedTableStickyHeader = (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
|
+
},
|
16
|
+
{
|
17
|
+
accessor: "scheduledMeetings",
|
18
|
+
label: "Scheduled Meetings",
|
19
|
+
},
|
20
|
+
{
|
21
|
+
accessor: "attendanceRate",
|
22
|
+
label: "Attendance Rate",
|
23
|
+
},
|
24
|
+
{
|
25
|
+
accessor: "completedClasses",
|
26
|
+
label: "Completed Classes",
|
27
|
+
},
|
28
|
+
{
|
29
|
+
accessor: "classCompletionRate",
|
30
|
+
label: "Class Completion Rate",
|
31
|
+
},
|
32
|
+
{
|
33
|
+
accessor: "graduatedStudents",
|
34
|
+
label: "Graduated Students",
|
35
|
+
},
|
36
|
+
]
|
37
|
+
|
38
|
+
const tableProps = {
|
39
|
+
sticky: true
|
40
|
+
}
|
41
|
+
|
42
|
+
return (
|
43
|
+
<div>
|
44
|
+
<AdvancedTable
|
45
|
+
columnDefinitions={columnDefinitions}
|
46
|
+
responsive="none"
|
47
|
+
tableData={MOCK_DATA}
|
48
|
+
tableProps={tableProps}
|
49
|
+
{...props}
|
50
|
+
/>
|
51
|
+
</div>
|
52
|
+
)
|
53
|
+
}
|
54
|
+
|
55
|
+
export default AdvancedTableStickyHeader
|
@@ -0,0 +1,3 @@
|
|
1
|
+
The `TableProps` prop can also be used to render a sticky header for the Advanced Table.
|
2
|
+
|
3
|
+
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.
|
@@ -0,0 +1,33 @@
|
|
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
|
+
},
|
11
|
+
{
|
12
|
+
accessor: "scheduledMeetings",
|
13
|
+
label: "Scheduled Meetings",
|
14
|
+
},
|
15
|
+
{
|
16
|
+
accessor: "attendanceRate",
|
17
|
+
label: "Attendance Rate",
|
18
|
+
},
|
19
|
+
{
|
20
|
+
accessor: "completedClasses",
|
21
|
+
label: "Completed Classes",
|
22
|
+
},
|
23
|
+
{
|
24
|
+
accessor: "classCompletionRate",
|
25
|
+
label: "Class Completion Rate",
|
26
|
+
},
|
27
|
+
{
|
28
|
+
accessor: "graduatedStudents",
|
29
|
+
label: "Graduated Students",
|
30
|
+
}
|
31
|
+
] %>
|
32
|
+
|
33
|
+
<%= pb_rails("advanced_table", props: { id: "sticky_header_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>
|
@@ -0,0 +1,3 @@
|
|
1
|
+
The `table_props` prop can also be used to render a sticky header for the Advanced Table.
|
2
|
+
|
3
|
+
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.
|
@@ -30,4 +30,4 @@
|
|
30
30
|
}
|
31
31
|
] %>
|
32
32
|
|
33
|
-
<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions,
|
33
|
+
<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
|
@@ -37,14 +37,13 @@ const AdvancedTableTableProps = (props) => {
|
|
37
37
|
|
38
38
|
const tableProps = {
|
39
39
|
container: false,
|
40
|
-
|
40
|
+
verticalBorder: true
|
41
41
|
}
|
42
42
|
|
43
43
|
return (
|
44
44
|
<div>
|
45
45
|
<AdvancedTable
|
46
46
|
columnDefinitions={columnDefinitions}
|
47
|
-
responsive="none"
|
48
47
|
tableData={MOCK_DATA}
|
49
48
|
tableProps={tableProps}
|
50
49
|
{...props}
|
@@ -1,3 +1,3 @@
|
|
1
|
-
This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table) under the hood which comes with its own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `table_props` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table).
|
1
|
+
This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table/react) under the hood which comes with its own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `table_props` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table/react).
|
2
2
|
|
3
|
-
This doc example showcases
|
3
|
+
This doc example showcases the use of two table props, including how to render the vertical borders between columns.
|
@@ -1,3 +1,3 @@
|
|
1
1
|
This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table/react) under the hood which comes with its own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `tableProps` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table/react).
|
2
2
|
|
3
|
-
This doc example showcases
|
3
|
+
This doc example showcases the use of two table props, including how to render the vertical borders between columns.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md
CHANGED
@@ -1,3 +1,7 @@
|
|
1
|
-
Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `table_props` and giving the AdvancedTable a `max_height` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop.
|
1
|
+
Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `table_props` and giving the AdvancedTable a `max_height` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop.
|
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
|
+
|
5
|
+
Expand the table above to see this in action.
|
6
|
+
|
7
|
+
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,3 +1,7 @@
|
|
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/visual_guidelines/max_height) global prop.
|
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/visual_guidelines/max_height) global prop.
|
2
2
|
|
3
|
-
|
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.
|
4
|
+
|
5
|
+
Expand the table above to see this in action.
|
6
|
+
|
7
|
+
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.
|
@@ -5,7 +5,8 @@ examples:
|
|
5
5
|
- advanced_table_beta_subrow_headers: SubRow Headers
|
6
6
|
- advanced_table_collapsible_trail_rails: Collapsible Trail
|
7
7
|
- advanced_table_table_props: Table Props
|
8
|
-
-
|
8
|
+
- advanced_table_sticky_header_rails: Sticky Header
|
9
|
+
- advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
|
9
10
|
- advanced_table_beta_sort: Enable Sorting
|
10
11
|
- advanced_table_responsive: Responsive Tables
|
11
12
|
- advanced_table_custom_cell_rails: Custom Components for Cells
|
@@ -21,12 +22,15 @@ examples:
|
|
21
22
|
- advanced_table_sort: Enable Sorting
|
22
23
|
- advanced_table_sort_control: Sort Control
|
23
24
|
- advanced_table_expanded_control: Expanded Control
|
25
|
+
- advanced_table_expand_by_depth: Expand by Depth
|
24
26
|
- advanced_table_subrow_headers: SubRow Headers
|
25
27
|
- advanced_table_collapsible_trail: Collapsible Trail
|
26
28
|
- advanced_table_table_options: Table Options
|
27
29
|
- advanced_table_table_props: Table Props
|
30
|
+
- advanced_table_sticky_header: Sticky Header
|
31
|
+
- advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
|
28
32
|
- advanced_table_sticky_columns: Sticky Columns
|
29
|
-
-
|
33
|
+
- advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
|
30
34
|
- advanced_table_inline_row_loading: Inline Row Loading
|
31
35
|
- advanced_table_responsive: Responsive Tables
|
32
36
|
- advanced_table_custom_cell: Custom Components for Cells
|
@@ -23,4 +23,7 @@ export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_tabl
|
|
23
23
|
export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
|
24
24
|
export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
|
25
25
|
export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
|
26
|
-
export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
|
26
|
+
export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
|
27
|
+
export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
|
28
|
+
export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
|
29
|
+
export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
|
@@ -55,4 +55,30 @@ $background_colors: map-merge($additional_colors, $merge_kits7);
|
|
55
55
|
transition: 700ms ease-in;
|
56
56
|
}
|
57
57
|
}
|
58
|
+
|
59
|
+
&[class*=imageoverlay] {
|
60
|
+
position: relative;
|
61
|
+
|
62
|
+
&:before {
|
63
|
+
content: "";
|
64
|
+
position: absolute;
|
65
|
+
top: 0;
|
66
|
+
left: 0;
|
67
|
+
right: 0;
|
68
|
+
bottom: 0;
|
69
|
+
z-index: 1;
|
70
|
+
background-color: inherit;
|
71
|
+
}
|
72
|
+
|
73
|
+
* {
|
74
|
+
position: relative;
|
75
|
+
z-index: 2;
|
76
|
+
}
|
77
|
+
}
|
78
|
+
|
79
|
+
@each $key, $value in $opacity {
|
80
|
+
&.imageoverlay_#{$key}::before {
|
81
|
+
opacity: $value;
|
82
|
+
}
|
83
|
+
}
|
58
84
|
}
|
@@ -25,6 +25,7 @@ type BackgroundProps = {
|
|
25
25
|
backgroundPosition?: ResponsiveProp<string> | string,
|
26
26
|
backgroundRepeat?: ResponsiveProp<BackgroundRepeat> | BackgroundRepeat,
|
27
27
|
imageUrl?: ResponsiveProp<string> | string,
|
28
|
+
imageOverlay?: 'opacity_1' | 'opacity_2' | 'opacity_3' | 'opacity_4' | 'opacity_5' | 'opacity_6' | 'opacity_7' | 'opacity_8' | 'opacity_9' | 'opacity_10',
|
28
29
|
children?: React.ReactChild[] | React.ReactNode,
|
29
30
|
className?: string,
|
30
31
|
customColor?: string,
|
@@ -83,11 +84,12 @@ const Background = (props: BackgroundProps): React.ReactElement => {
|
|
83
84
|
data = {},
|
84
85
|
htmlOptions = {},
|
85
86
|
id,
|
87
|
+
imageOverlay,
|
86
88
|
imageUrl = '',
|
87
89
|
tag = 'div',
|
88
90
|
transition = '',
|
89
91
|
} = props
|
90
|
-
|
92
|
+
|
91
93
|
const [responsiveProps, setResponsiveProps] = useState({
|
92
94
|
backgroundSize: getResponsiveValue(backgroundSize),
|
93
95
|
backgroundPosition: getResponsiveValue(backgroundPosition),
|
@@ -132,6 +134,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
|
|
132
134
|
[`pb_background_color_${resBackgroundColor}`]: resBackgroundColor && !customColor,
|
133
135
|
[`pb_background_custom_color`]: !!customColor,
|
134
136
|
},
|
137
|
+
imageOverlay ? `imageoverlay_${imageOverlay}` : "",
|
135
138
|
className
|
136
139
|
);
|
137
140
|
|
@@ -155,7 +158,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
|
|
155
158
|
const ariaProps = buildAriaProps(aria);
|
156
159
|
const dataProps = buildDataProps(data);
|
157
160
|
const htmlProps = buildHtmlProps(htmlOptions);
|
158
|
-
|
161
|
+
|
159
162
|
return (
|
160
163
|
<Tag
|
161
164
|
{...ariaProps}
|
@@ -168,7 +171,6 @@ const Background = (props: BackgroundProps): React.ReactElement => {
|
|
168
171
|
>
|
169
172
|
{children}
|
170
173
|
</Tag>
|
171
|
-
|
172
174
|
)
|
173
175
|
}
|
174
176
|
|