playbook_ui 14.9.0.pre.rc.8 → 14.9.0.pre.rc.9
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_table/_table.tsx +103 -24
- 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/app/pb_kits/playbook/pb_table/styles/_all.scss +2 -0
- data/app/pb_kits/playbook/pb_table/styles/_scroll.scss +4 -0
- data/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss +18 -0
- data/dist/chunks/_weekday_stacked-BDFu4IMD.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +7 -3
- data/dist/chunks/_weekday_stacked-Cup4SPuD.js +0 -45
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 9776a6b2cc0773b96ea0692639d9326e0463c1ba4161df34975083404f7e2952
|
|
4
|
+
data.tar.gz: 36f3d6fdb96a5f887288e0589898cc17e88b991f5bb746d72d5bbf78bf90208a
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: fe8d0268bef25e566040416f2a6f1b366d4763727fc5d17955b6e8edc31a112805a01970109c9b922ca3b1e96c6e33191d3d1a62f1fa2a0e43831ebb13011978
|
|
7
|
+
data.tar.gz: 30cb3ba1b60e21fcc42848fb1f76041554a1faed8ead3e79c31d6ac791988924534761e73cbe1a333527d4d6561dff9af38c5a802c32720a538df00815716c48
|
|
@@ -4,11 +4,11 @@ import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/pro
|
|
|
4
4
|
import { globalProps, GlobalProps } from '../utilities/globalProps'
|
|
5
5
|
import PbTable from '.'
|
|
6
6
|
import {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
TableHead,
|
|
8
|
+
TableHeader,
|
|
9
|
+
TableBody,
|
|
10
|
+
TableRow,
|
|
11
|
+
TableCell,
|
|
12
12
|
} from "./subcomponents";
|
|
13
13
|
|
|
14
14
|
type TableProps = {
|
|
@@ -28,6 +28,7 @@ type TableProps = {
|
|
|
28
28
|
singleLine?: boolean,
|
|
29
29
|
size?: "sm" | "md" | "lg",
|
|
30
30
|
sticky?: boolean,
|
|
31
|
+
stickyLeftcolumn?: string[],
|
|
31
32
|
striped?: boolean,
|
|
32
33
|
tag?: "table" | "div",
|
|
33
34
|
verticalBorder?: boolean,
|
|
@@ -51,6 +52,7 @@ const Table = (props: TableProps): React.ReactElement => {
|
|
|
51
52
|
singleLine = false,
|
|
52
53
|
size = 'sm',
|
|
53
54
|
sticky = false,
|
|
55
|
+
stickyLeftcolumn = [],
|
|
54
56
|
striped = false,
|
|
55
57
|
tag = 'table',
|
|
56
58
|
verticalBorder = false,
|
|
@@ -76,6 +78,7 @@ const Table = (props: TableProps): React.ReactElement => {
|
|
|
76
78
|
'single-line': singleLine,
|
|
77
79
|
'no-hover': disableHover,
|
|
78
80
|
'sticky-header': sticky,
|
|
81
|
+
'sticky-left-column': stickyLeftcolumn,
|
|
79
82
|
'striped': striped,
|
|
80
83
|
[outerPaddingCss]: outerPadding !== '',
|
|
81
84
|
},
|
|
@@ -85,6 +88,56 @@ const Table = (props: TableProps): React.ReactElement => {
|
|
|
85
88
|
className
|
|
86
89
|
)
|
|
87
90
|
|
|
91
|
+
useEffect(() => {
|
|
92
|
+
const handleStickyColumns = () => {
|
|
93
|
+
let accumulatedWidth = 0;
|
|
94
|
+
|
|
95
|
+
stickyLeftcolumn.forEach((colId, index) => {
|
|
96
|
+
const isLastColumn = index === stickyLeftcolumn.length - 1;
|
|
97
|
+
const header = document.querySelector(`th[id="${colId}"]`);
|
|
98
|
+
const cells = document.querySelectorAll(`td[id="${colId}"]`);
|
|
99
|
+
|
|
100
|
+
if (header) {
|
|
101
|
+
header.classList.add('sticky');
|
|
102
|
+
(header as HTMLElement).style.left = `${accumulatedWidth}px`;
|
|
103
|
+
|
|
104
|
+
if (!isLastColumn) {
|
|
105
|
+
header.classList.add('with-border');
|
|
106
|
+
header.classList.remove('sticky-shadow');
|
|
107
|
+
} else {
|
|
108
|
+
header.classList.remove('with-border');
|
|
109
|
+
header.classList.add('sticky-shadow');
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
accumulatedWidth += (header as HTMLElement).offsetWidth;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
cells.forEach((cell) => {
|
|
116
|
+
cell.classList.add('sticky');
|
|
117
|
+
(cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
|
|
118
|
+
|
|
119
|
+
if (!isLastColumn) {
|
|
120
|
+
cell.classList.add('with-border');
|
|
121
|
+
cell.classList.remove('sticky-shadow');
|
|
122
|
+
} else {
|
|
123
|
+
cell.classList.remove('with-border');
|
|
124
|
+
cell.classList.add('sticky-shadow');
|
|
125
|
+
}
|
|
126
|
+
});
|
|
127
|
+
});
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
setTimeout(() => {
|
|
131
|
+
handleStickyColumns();
|
|
132
|
+
}, 10);
|
|
133
|
+
|
|
134
|
+
window.addEventListener('resize', handleStickyColumns);
|
|
135
|
+
|
|
136
|
+
return () => {
|
|
137
|
+
window.removeEventListener('resize', handleStickyColumns);
|
|
138
|
+
};
|
|
139
|
+
}, [stickyLeftcolumn]);
|
|
140
|
+
|
|
88
141
|
useEffect(() => {
|
|
89
142
|
const instance = new PbTable()
|
|
90
143
|
instance.connect()
|
|
@@ -92,26 +145,52 @@ const Table = (props: TableProps): React.ReactElement => {
|
|
|
92
145
|
|
|
93
146
|
return (
|
|
94
147
|
<>
|
|
95
|
-
{
|
|
96
|
-
<table
|
|
97
|
-
{
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
148
|
+
{responsive === 'scroll' ? (
|
|
149
|
+
<div className='table-responsive-scroll'>
|
|
150
|
+
{isTableTag ? (
|
|
151
|
+
<table
|
|
152
|
+
{...ariaProps}
|
|
153
|
+
{...dataProps}
|
|
154
|
+
{...htmlProps}
|
|
155
|
+
className={classNames}
|
|
156
|
+
id={id}
|
|
157
|
+
>
|
|
158
|
+
{children}
|
|
159
|
+
</table>
|
|
160
|
+
) : (
|
|
161
|
+
<div
|
|
162
|
+
{...ariaProps}
|
|
163
|
+
{...dataProps}
|
|
164
|
+
{...htmlProps}
|
|
165
|
+
className={classNames}
|
|
166
|
+
id={id}
|
|
167
|
+
>
|
|
168
|
+
{children}
|
|
169
|
+
</div>
|
|
170
|
+
)}
|
|
114
171
|
</div>
|
|
172
|
+
) : (
|
|
173
|
+
isTableTag ? (
|
|
174
|
+
<table
|
|
175
|
+
{...ariaProps}
|
|
176
|
+
{...dataProps}
|
|
177
|
+
{...htmlProps}
|
|
178
|
+
className={classNames}
|
|
179
|
+
id={id}
|
|
180
|
+
>
|
|
181
|
+
{children}
|
|
182
|
+
</table>
|
|
183
|
+
) : (
|
|
184
|
+
<div
|
|
185
|
+
{...ariaProps}
|
|
186
|
+
{...dataProps}
|
|
187
|
+
{...htmlProps}
|
|
188
|
+
className={classNames}
|
|
189
|
+
id={id}
|
|
190
|
+
>
|
|
191
|
+
{children}
|
|
192
|
+
</div>
|
|
193
|
+
)
|
|
115
194
|
)}
|
|
116
195
|
</>
|
|
117
196
|
)
|
|
@@ -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'
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
@import "../../tokens/colors";
|
|
2
|
+
|
|
3
|
+
[class^="pb_table"] {
|
|
4
|
+
.sticky {
|
|
5
|
+
position: sticky !important;
|
|
6
|
+
left: 0;
|
|
7
|
+
z-index: 1;
|
|
8
|
+
background-color: white;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.with-border {
|
|
12
|
+
border-right: 1px solid $border_light !important;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.sticky-shadow {
|
|
16
|
+
box-shadow: 4px 0 10px rgba(60, 106, 172, 0.16) !important;
|
|
17
|
+
}
|
|
18
|
+
}
|