playbook_ui 13.19.0.pre.alpha.PBNTR207tabledivsupport2261 → 13.19.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md +1 -1
- data/app/pb_kits/playbook/pb_table/_table.tsx +67 -86
- data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_table/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_table/styles/_content.scss +3 -3
- data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +15 -15
- data/app/pb_kits/playbook/pb_table/styles/_headers.scss +3 -3
- data/app/pb_kits/playbook/pb_table/styles/_hover.scss +11 -11
- data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +15 -15
- data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +15 -15
- data/app/pb_kits/playbook/pb_table/styles/_reset.scss +3 -3
- data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss +2 -2
- data/app/pb_kits/playbook/pb_table/styles/_single-line.scss +4 -4
- data/app/pb_kits/playbook/pb_table/styles/_sticky_header.scss +2 -2
- data/app/pb_kits/playbook/pb_table/styles/_striped.scss +4 -4
- data/app/pb_kits/playbook/pb_table/styles/_structure.scss +6 -18
- data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +7 -7
- data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss +14 -14
- data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +2 -2
- data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +15 -15
- data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +4 -3
- data/app/pb_kits/playbook/pb_table/table.html.erb +2 -12
- data/app/pb_kits/playbook/pb_table/table.rb +0 -3
- data/lib/playbook/version.rb +2 -2
- metadata +7 -9
- data/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb +0 -34
- data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx +0 -47
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 5e7f392fc3d4bc8c6c896b4b54fd0cf5fcb4953fc1de2ee8bd59f14e223462a5
|
|
4
|
+
data.tar.gz: 71904fc8f23cb411b2022643cb08167a3c8a882a9f1bd135dbbeb980674c0bf4
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 85f2629ac4ad220d2c39ca406eb422a9ae0d04052f6bb893b3feceb1b909b281d19faa7a47e2f09a2003fb5ac2f2aa42bddabcf337b54ee345841d96be308ec3
|
|
7
|
+
data.tar.gz: cb38c42e015efbec6d56ed5d6cb4bdfe8c0cdeb91f4c8baeb02679348380c4dbca08f1a6d977bc3c23f0e761b43f1e9578ee1d4c1600cd94048fbe2970d6a27d
|
|
@@ -1 +1 @@
|
|
|
1
|
-
`collapsibleTrail` is an optional prop that is set to 'true' by default. If set to 'false', it will remove the trail on the left of
|
|
1
|
+
`collapsibleTrail` is an optional prop that is set to 'true' by default. If set to 'false', it will remove the trail on the left of rows when subRows are toggled open.
|
|
@@ -8,7 +8,7 @@ For a visual of the data structure needed for `tableData`, see [here](https://gi
|
|
|
8
8
|
|
|
9
9
|
### columnDefinitions
|
|
10
10
|
|
|
11
|
-
`columnDefinitions` maps to the columns prop on the Tanstack table. Column definitions are the single most important part of building a table as they are responsible for building the underlying data model that is used for all sorting, expansion, etc. `ColumnDefinitions` in the AdvancedTable kit is
|
|
11
|
+
`columnDefinitions` maps to the columns prop on the Tanstack table. Column definitions are the single most important part of building a table as they are responsible for building the underlying data model that is used for all sorting, expansion, etc. `ColumnDefinitions` in the AdvancedTable kit is a array of objects as seen in the code snippet below. Each object within the array has two REQUIRED items:
|
|
12
12
|
|
|
13
13
|
- `accessor`: this is the key from your data for the value you want rendered in that column
|
|
14
14
|
- `label`: this is what will be rendered as the column header label
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
the optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided.
|
|
2
2
|
|
|
3
|
-
By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowCount` prop can be used to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.
|
|
3
|
+
By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowCount` prop can be used to to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
`subRowHeaders` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
|
|
2
2
|
|
|
3
|
-
`enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be 'all'
|
|
3
|
+
`enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be 'all' or 'header". If set to 'all', the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to 'header' button will only appear in header and NOT in subRow headers. This is set to 'headeer' by default.
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
The Tanstack table consumes the useReactTable hook to create the table. This hook takes an object that can contain any of the functions that the Tanstack table provides. The advancedTable's optional `tableOptions` can be used to pass tanstack options to the kit.
|
|
2
2
|
|
|
3
|
-
In the above example, we are using the initialState option provided by tanstack that takes sort as one of it's values. Setting it to true for the first column is reversing the sort order on first render of the table. For a complete list of possible options and
|
|
3
|
+
In the above example, we are using the initialState option provided by tanstack that takes sort as one of it's values. Setting it to true for the first column is reversing the sort order on first render of the table. For a complete list of possible options and hoe to use them, see [here](https://tanstack.com/table/v8/docs/api/core/table#usereacttable--createsolidtable--usevuetable--createsveltetable)
|
|
@@ -5,60 +5,67 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
|
|
|
5
5
|
import PbTable from '.'
|
|
6
6
|
|
|
7
7
|
type TableProps = {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
verticalBorder?: boolean,
|
|
8
|
+
aria?: { [key: string]: string },
|
|
9
|
+
children: React.ReactNode[] | React.ReactNode,
|
|
10
|
+
className: string,
|
|
11
|
+
collapse?: "sm" | "md" | "lg",
|
|
12
|
+
container?: boolean,
|
|
13
|
+
dark?: boolean,
|
|
14
|
+
data?: { [key: string]: string },
|
|
15
|
+
dataTable: boolean,
|
|
16
|
+
disableHover?: boolean,
|
|
17
|
+
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
|
18
|
+
id?: string,
|
|
19
|
+
responsive?: "collapse" | "scroll" | "none",
|
|
20
|
+
singleLine?: boolean,
|
|
21
|
+
size?: "sm" | "md" | "lg",
|
|
22
|
+
sticky?: boolean,
|
|
23
|
+
striped?: boolean,
|
|
24
|
+
verticalBorder?: boolean,
|
|
26
25
|
} & GlobalProps
|
|
27
26
|
|
|
28
27
|
const Table = (props: TableProps) => {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
} = props
|
|
28
|
+
const {
|
|
29
|
+
aria = {},
|
|
30
|
+
children,
|
|
31
|
+
className,
|
|
32
|
+
collapse = 'sm',
|
|
33
|
+
container = true,
|
|
34
|
+
dark,
|
|
35
|
+
data = {},
|
|
36
|
+
dataTable = false,
|
|
37
|
+
disableHover = false,
|
|
38
|
+
htmlOptions = {},
|
|
39
|
+
id,
|
|
40
|
+
responsive = 'collapse',
|
|
41
|
+
singleLine = false,
|
|
42
|
+
size = 'sm',
|
|
43
|
+
sticky = false,
|
|
44
|
+
striped = false,
|
|
45
|
+
verticalBorder = false,
|
|
46
|
+
} = props
|
|
49
47
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
const isTableTag = tag === 'table'
|
|
48
|
+
const ariaProps = buildAriaProps(aria)
|
|
49
|
+
const dataProps = buildDataProps(data)
|
|
50
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
|
51
|
+
const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
|
|
52
|
+
const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
|
|
56
53
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
54
|
+
useEffect(() => {
|
|
55
|
+
const instance = new PbTable()
|
|
56
|
+
instance.connect()
|
|
57
|
+
}, [])
|
|
58
|
+
|
|
59
|
+
return (
|
|
60
|
+
<table
|
|
61
|
+
{...ariaProps}
|
|
62
|
+
{...dataProps}
|
|
63
|
+
{...htmlProps}
|
|
64
|
+
className={classnames(
|
|
65
|
+
'pb_table',
|
|
66
|
+
`table-${size}`,
|
|
67
|
+
`table-responsive-${responsive}`,
|
|
68
|
+
{
|
|
62
69
|
'table-card': container,
|
|
63
70
|
'table-dark': dark,
|
|
64
71
|
'data_table': dataTable,
|
|
@@ -66,43 +73,17 @@ const Table = (props: TableProps) => {
|
|
|
66
73
|
'no-hover': disableHover,
|
|
67
74
|
'sticky-header': sticky,
|
|
68
75
|
'striped': striped,
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
return (
|
|
82
|
-
<>
|
|
83
|
-
{isTableTag ? (
|
|
84
|
-
<table
|
|
85
|
-
{...ariaProps}
|
|
86
|
-
{...dataProps}
|
|
87
|
-
{...htmlProps}
|
|
88
|
-
className={classNames}
|
|
89
|
-
id={id}
|
|
90
|
-
>
|
|
91
|
-
{children}
|
|
92
|
-
</table>
|
|
93
|
-
) : (
|
|
94
|
-
<div
|
|
95
|
-
{...ariaProps}
|
|
96
|
-
{...dataProps}
|
|
97
|
-
{...htmlProps}
|
|
98
|
-
className={classNames}
|
|
99
|
-
id={id}
|
|
100
|
-
>
|
|
101
|
-
{children}
|
|
102
|
-
</div>
|
|
103
|
-
)}
|
|
104
|
-
</>
|
|
105
|
-
)
|
|
76
|
+
},
|
|
77
|
+
globalProps(props),
|
|
78
|
+
tableCollapseCss,
|
|
79
|
+
verticalBorderCss,
|
|
80
|
+
className
|
|
81
|
+
)}
|
|
82
|
+
id={id}
|
|
83
|
+
>
|
|
84
|
+
{children}
|
|
85
|
+
</table>
|
|
86
|
+
)
|
|
106
87
|
}
|
|
107
88
|
|
|
108
89
|
export default Table
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
examples:
|
|
2
2
|
rails:
|
|
3
|
-
- table_div: Div
|
|
4
3
|
- table_sm: Small
|
|
5
4
|
- table_md: Medium
|
|
6
5
|
- table_lg: Large
|
|
@@ -27,7 +26,6 @@ examples:
|
|
|
27
26
|
- table_striped: Striped Table
|
|
28
27
|
|
|
29
28
|
react:
|
|
30
|
-
- table_div: Div
|
|
31
29
|
- table_sm: Small
|
|
32
30
|
- table_md: Medium
|
|
33
31
|
- table_lg: Large
|
|
@@ -21,4 +21,3 @@ export { default as TableAlignmentShiftData } from './_table_alignment_shift_dat
|
|
|
21
21
|
export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
|
|
22
22
|
export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
|
|
23
23
|
export { default as TableStriped } from './_table_striped.jsx'
|
|
24
|
-
export { default as TableDiv } from './_table_div.jsx'
|
|
@@ -10,21 +10,21 @@
|
|
|
10
10
|
width: 100%;
|
|
11
11
|
background: none !important;
|
|
12
12
|
|
|
13
|
-
thead
|
|
14
|
-
tr
|
|
13
|
+
thead {
|
|
14
|
+
tr {
|
|
15
15
|
left: $offscreen;
|
|
16
16
|
position: absolute;
|
|
17
17
|
top: $offscreen;
|
|
18
18
|
|
|
19
|
-
th
|
|
19
|
+
th {
|
|
20
20
|
display: block;
|
|
21
21
|
visibility: visible;
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
|
-
tbody
|
|
26
|
-
tr
|
|
27
|
-
td
|
|
25
|
+
tbody {
|
|
26
|
+
tr {
|
|
27
|
+
td {
|
|
28
28
|
display: block;
|
|
29
29
|
visibility: visible;
|
|
30
30
|
border-left-width: 1px !important;
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
&:first-child {
|
|
66
|
-
td
|
|
66
|
+
td {
|
|
67
67
|
&:first-child {
|
|
68
68
|
margin-top: $space-xs !important;
|
|
69
69
|
}
|
|
@@ -74,9 +74,9 @@
|
|
|
74
74
|
&.table-card {
|
|
75
75
|
background: none !important;
|
|
76
76
|
|
|
77
|
-
tbody
|
|
78
|
-
tr
|
|
79
|
-
td
|
|
77
|
+
tbody {
|
|
78
|
+
tr {
|
|
79
|
+
td {
|
|
80
80
|
background: $white !important;
|
|
81
81
|
border-left-width: 1px !important;
|
|
82
82
|
border-right-width: 1px !important;
|
|
@@ -98,8 +98,8 @@
|
|
|
98
98
|
}
|
|
99
99
|
@media (hover:hover) {
|
|
100
100
|
&:hover {
|
|
101
|
-
tbody
|
|
102
|
-
tr
|
|
101
|
+
tbody {
|
|
102
|
+
tr {
|
|
103
103
|
box-shadow: 0 0 0 $white !important;
|
|
104
104
|
}
|
|
105
105
|
}
|
|
@@ -108,9 +108,9 @@
|
|
|
108
108
|
// reset the first and last to normalize
|
|
109
109
|
@each $name, $value in $cell-pad-list {
|
|
110
110
|
&.#{$name} {
|
|
111
|
-
tbody
|
|
112
|
-
tr
|
|
113
|
-
td
|
|
111
|
+
tbody {
|
|
112
|
+
tr {
|
|
113
|
+
td {
|
|
114
114
|
&:first-child,
|
|
115
115
|
&:last-child {
|
|
116
116
|
padding: $value $cell-gutter !important;
|
|
@@ -9,17 +9,17 @@ $border_hover_color_dark: lighten($border_dark, 5%);
|
|
|
9
9
|
&.table-lg {
|
|
10
10
|
&:not(.no-hover) {
|
|
11
11
|
border-collapse: collapse;
|
|
12
|
-
tbody
|
|
13
|
-
tr
|
|
12
|
+
tbody {
|
|
13
|
+
tr {
|
|
14
14
|
box-shadow: 0 0 0 $white;
|
|
15
15
|
transition: box-shadow $transition-speed ease;
|
|
16
|
-
td
|
|
16
|
+
td {
|
|
17
17
|
border-top-color: transparent;
|
|
18
18
|
border-top-width: 0;
|
|
19
19
|
transition: all $transition-speed ease;
|
|
20
20
|
}
|
|
21
21
|
@media (hover:hover) {
|
|
22
|
-
td
|
|
22
|
+
td {
|
|
23
23
|
position: relative;
|
|
24
24
|
&:after {
|
|
25
25
|
transition: background-color $transition-speed ease, height $transition-speed ease;
|
|
@@ -41,7 +41,7 @@ $border_hover_color_dark: lighten($border_dark, 5%);
|
|
|
41
41
|
}
|
|
42
42
|
&:hover {
|
|
43
43
|
box-shadow: 0 2px 10px 0 rgba($slate, $opacity-6);
|
|
44
|
-
td
|
|
44
|
+
td {
|
|
45
45
|
border-color: darken($border_light, 10%);
|
|
46
46
|
border-top-width: 0;
|
|
47
47
|
border-top-color: transparent;
|
|
@@ -57,9 +57,9 @@ $border_hover_color_dark: lighten($border_dark, 5%);
|
|
|
57
57
|
}
|
|
58
58
|
&.table-card {
|
|
59
59
|
border-collapse: separate;
|
|
60
|
-
tbody
|
|
61
|
-
tr
|
|
62
|
-
td
|
|
60
|
+
tbody {
|
|
61
|
+
tr {
|
|
62
|
+
td {
|
|
63
63
|
&:first-child {
|
|
64
64
|
border-left-width: 1px;
|
|
65
65
|
}
|
|
@@ -72,12 +72,12 @@ $border_hover_color_dark: lighten($border_dark, 5%);
|
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
&.dark {
|
|
75
|
-
tbody
|
|
76
|
-
tr
|
|
75
|
+
tbody {
|
|
76
|
+
tr {
|
|
77
77
|
@media (hover:hover) {
|
|
78
78
|
&:hover {
|
|
79
79
|
box-shadow: 0 2px 10px 0 $shadow_dark;
|
|
80
|
-
td
|
|
80
|
+
td {
|
|
81
81
|
border-top-width: 0;
|
|
82
82
|
border-top-color: transparent;
|
|
83
83
|
border-color: $border_hover_color_dark !important;
|
|
@@ -10,21 +10,21 @@
|
|
|
10
10
|
width: 100%;
|
|
11
11
|
background: none !important;
|
|
12
12
|
|
|
13
|
-
thead
|
|
14
|
-
tr
|
|
13
|
+
thead {
|
|
14
|
+
tr {
|
|
15
15
|
left: $offscreen;
|
|
16
16
|
position: absolute;
|
|
17
17
|
top: $offscreen;
|
|
18
18
|
|
|
19
|
-
th
|
|
19
|
+
th {
|
|
20
20
|
display: block;
|
|
21
21
|
visibility: visible;
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
|
-
tbody
|
|
26
|
-
tr
|
|
27
|
-
td
|
|
25
|
+
tbody {
|
|
26
|
+
tr {
|
|
27
|
+
td {
|
|
28
28
|
display: block;
|
|
29
29
|
visibility: visible;
|
|
30
30
|
border-left-width: 1px !important;
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
&:first-child {
|
|
66
|
-
td
|
|
66
|
+
td {
|
|
67
67
|
&:first-child {
|
|
68
68
|
margin-top: $space-xs !important;
|
|
69
69
|
}
|
|
@@ -74,9 +74,9 @@
|
|
|
74
74
|
&.table-card {
|
|
75
75
|
background: none !important;
|
|
76
76
|
|
|
77
|
-
tbody
|
|
78
|
-
tr
|
|
79
|
-
td
|
|
77
|
+
tbody {
|
|
78
|
+
tr {
|
|
79
|
+
td {
|
|
80
80
|
background: $white !important;
|
|
81
81
|
border-left-width: 1px !important;
|
|
82
82
|
border-right-width: 1px !important;
|
|
@@ -98,8 +98,8 @@
|
|
|
98
98
|
}
|
|
99
99
|
@media (hover:hover) {
|
|
100
100
|
&:hover {
|
|
101
|
-
tbody
|
|
102
|
-
tr
|
|
101
|
+
tbody {
|
|
102
|
+
tr {
|
|
103
103
|
box-shadow: 0 0 0 $white !important;
|
|
104
104
|
}
|
|
105
105
|
}
|
|
@@ -108,9 +108,9 @@
|
|
|
108
108
|
// reset the first and last to normalize
|
|
109
109
|
@each $name, $value in $cell-pad-list {
|
|
110
110
|
&.#{$name} {
|
|
111
|
-
tbody
|
|
112
|
-
tr
|
|
113
|
-
td
|
|
111
|
+
tbody {
|
|
112
|
+
tr {
|
|
113
|
+
td {
|
|
114
114
|
&:first-child,
|
|
115
115
|
&:last-child {
|
|
116
116
|
padding: $value $cell-gutter !important;
|
|
@@ -10,21 +10,21 @@
|
|
|
10
10
|
width: 100%;
|
|
11
11
|
background: none !important;
|
|
12
12
|
|
|
13
|
-
thead
|
|
14
|
-
tr
|
|
13
|
+
thead {
|
|
14
|
+
tr {
|
|
15
15
|
left: $offscreen;
|
|
16
16
|
position: absolute;
|
|
17
17
|
top: $offscreen;
|
|
18
18
|
|
|
19
|
-
th
|
|
19
|
+
th {
|
|
20
20
|
display: block;
|
|
21
21
|
visibility: visible;
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
|
-
tbody
|
|
26
|
-
tr
|
|
27
|
-
td
|
|
25
|
+
tbody {
|
|
26
|
+
tr {
|
|
27
|
+
td {
|
|
28
28
|
display: block;
|
|
29
29
|
visibility: visible;
|
|
30
30
|
border-left-width: 1px !important;
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
&:first-child {
|
|
66
|
-
td
|
|
66
|
+
td {
|
|
67
67
|
&:first-child {
|
|
68
68
|
margin-top: $space-xs !important;
|
|
69
69
|
}
|
|
@@ -74,9 +74,9 @@
|
|
|
74
74
|
&.table-card {
|
|
75
75
|
background: none !important;
|
|
76
76
|
|
|
77
|
-
tbody
|
|
78
|
-
tr
|
|
79
|
-
td
|
|
77
|
+
tbody {
|
|
78
|
+
tr {
|
|
79
|
+
td {
|
|
80
80
|
background: $white !important;
|
|
81
81
|
border-left-width: 1px !important;
|
|
82
82
|
border-right-width: 1px !important;
|
|
@@ -98,8 +98,8 @@
|
|
|
98
98
|
}
|
|
99
99
|
@media (hover:hover) {
|
|
100
100
|
&:hover {
|
|
101
|
-
tbody
|
|
102
|
-
tr
|
|
101
|
+
tbody {
|
|
102
|
+
tr {
|
|
103
103
|
box-shadow: 0 0 0 $white !important;
|
|
104
104
|
}
|
|
105
105
|
}
|
|
@@ -108,9 +108,9 @@
|
|
|
108
108
|
// reset the first and last to normalize
|
|
109
109
|
@each $name, $value in $cell-pad-list {
|
|
110
110
|
&.#{$name} {
|
|
111
|
-
tbody
|
|
112
|
-
tr
|
|
113
|
-
td
|
|
111
|
+
tbody {
|
|
112
|
+
tr {
|
|
113
|
+
td {
|
|
114
114
|
&:first-child,
|
|
115
115
|
&:last-child {
|
|
116
116
|
padding: $value $cell-gutter !important;
|
|
@@ -8,11 +8,11 @@ $pb_table_row_kit_side_highlight_colors: map-merge(map-merge($status_colors, $pr
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
[class^=pb_table] {
|
|
11
|
-
tbody
|
|
11
|
+
tbody {
|
|
12
12
|
[class^=pb_table_row_kit] {
|
|
13
13
|
@each $color_name, $color_value in $pb_table_row_kit_side_highlight_colors {
|
|
14
14
|
&[class*=_side_highlight_#{$color_name}] {
|
|
15
|
-
td
|
|
15
|
+
td {
|
|
16
16
|
&:first-child {
|
|
17
17
|
@include pb_table_row_kit_side_highlight($color_value);
|
|
18
18
|
}
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
max-width: 100vw;
|
|
5
5
|
table-layout: fixed;
|
|
6
6
|
|
|
7
|
-
tbody
|
|
8
|
-
tr
|
|
9
|
-
td
|
|
7
|
+
tbody {
|
|
8
|
+
tr {
|
|
9
|
+
td {
|
|
10
10
|
white-space: nowrap;
|
|
11
11
|
text-overflow: ellipsis;
|
|
12
12
|
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
display: block !important;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
br
|
|
23
|
+
br {
|
|
24
24
|
content:' ' !important;
|
|
25
25
|
|
|
26
26
|
&::after {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
[class^="pb_table"] {
|
|
4
4
|
&.sticky-header {
|
|
5
|
-
thead
|
|
5
|
+
thead {
|
|
6
6
|
background: $white;
|
|
7
7
|
position: sticky;
|
|
8
8
|
top: 0;
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
&.dark {
|
|
14
14
|
&.sticky-header {
|
|
15
|
-
thead
|
|
15
|
+
thead {
|
|
16
16
|
background: $bg_dark;
|
|
17
17
|
position: sticky;
|
|
18
18
|
top: 0;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
[class^=pb_table] {
|
|
2
2
|
&.striped {
|
|
3
|
-
tbody
|
|
4
|
-
tr:nth-child(odd)
|
|
3
|
+
tbody {
|
|
4
|
+
tr:nth-child(odd) {
|
|
5
5
|
background-color: $bg_light;
|
|
6
6
|
}
|
|
7
7
|
}
|
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
|
|
10
10
|
&.dark {
|
|
11
11
|
&.striped {
|
|
12
|
-
tbody
|
|
13
|
-
tr:nth-child(odd)
|
|
12
|
+
tbody {
|
|
13
|
+
tr:nth-child(odd) {
|
|
14
14
|
background-color: $bg_dark;
|
|
15
15
|
}
|
|
16
16
|
}
|
|
@@ -1,19 +1,12 @@
|
|
|
1
1
|
@import "../../tokens/colors";
|
|
2
2
|
|
|
3
3
|
[class^=pb_table] {
|
|
4
|
-
display: table;
|
|
5
|
-
|
|
6
4
|
@each $name, $value in $cell-pad-list {
|
|
7
5
|
&.#{$name} {
|
|
8
6
|
width: 100%;
|
|
9
|
-
thead
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
tr, .pb_table_tr {
|
|
13
|
-
display: table-row;
|
|
14
|
-
|
|
15
|
-
th, .pb_table_th {
|
|
16
|
-
display: table-cell;
|
|
7
|
+
thead {
|
|
8
|
+
tr {
|
|
9
|
+
th {
|
|
17
10
|
padding: $cell-pad-md $cell-gutter;
|
|
18
11
|
|
|
19
12
|
&:first-child {
|
|
@@ -25,14 +18,9 @@
|
|
|
25
18
|
}
|
|
26
19
|
}
|
|
27
20
|
}
|
|
28
|
-
tbody
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
tr, .pb_table_tr {
|
|
32
|
-
display: table-row;
|
|
33
|
-
|
|
34
|
-
td, .pb_table_td {
|
|
35
|
-
display: table-cell;
|
|
21
|
+
tbody {
|
|
22
|
+
tr {
|
|
23
|
+
td {
|
|
36
24
|
border-color: $border_light;
|
|
37
25
|
border-style: solid;
|
|
38
26
|
border-width: 0 0 1px;
|
|
@@ -7,9 +7,9 @@
|
|
|
7
7
|
border-spacing: 0;
|
|
8
8
|
background: $white;
|
|
9
9
|
|
|
10
|
-
thead
|
|
11
|
-
tr
|
|
12
|
-
th
|
|
10
|
+
thead {
|
|
11
|
+
tr {
|
|
12
|
+
th {
|
|
13
13
|
border-color: $border_light;
|
|
14
14
|
border-style: solid;
|
|
15
15
|
border-width: 1px 0 1px 0;
|
|
@@ -26,9 +26,9 @@
|
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
tbody
|
|
30
|
-
tr
|
|
31
|
-
td
|
|
29
|
+
tbody {
|
|
30
|
+
tr {
|
|
31
|
+
td {
|
|
32
32
|
border-color: $border_light;
|
|
33
33
|
border-style: solid;
|
|
34
34
|
border-width: 0 0 1px 0;
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
&:last-child {
|
|
45
|
-
td
|
|
45
|
+
td {
|
|
46
46
|
border-width: 0 0 1px 0;
|
|
47
47
|
|
|
48
48
|
&:first-child {
|
|
@@ -7,22 +7,22 @@ $table-dark-card-bg: $card_dark;
|
|
|
7
7
|
&.table-md,
|
|
8
8
|
&.table-lg {
|
|
9
9
|
&.table-dark {
|
|
10
|
-
thead
|
|
11
|
-
tr
|
|
10
|
+
thead {
|
|
11
|
+
tr {
|
|
12
12
|
border-color: $border_dark !important;
|
|
13
13
|
|
|
14
|
-
th
|
|
14
|
+
th {
|
|
15
15
|
border-color: $border_dark !important;
|
|
16
16
|
color: $text_dk_light;
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
|
-
tbody
|
|
21
|
-
tr
|
|
20
|
+
tbody {
|
|
21
|
+
tr {
|
|
22
22
|
border-color: $border_dark;
|
|
23
23
|
transition: none !important;
|
|
24
24
|
|
|
25
|
-
td
|
|
25
|
+
td {
|
|
26
26
|
border-color: $border_dark !important;
|
|
27
27
|
color: $white;
|
|
28
28
|
|
|
@@ -31,7 +31,7 @@ $table-dark-card-bg: $card_dark;
|
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
&:first-child {
|
|
34
|
-
td
|
|
34
|
+
td {
|
|
35
35
|
border-top-width: 0 !important;
|
|
36
36
|
}
|
|
37
37
|
}
|
|
@@ -54,9 +54,9 @@ $table-dark-card-bg: $card_dark;
|
|
|
54
54
|
&.table-dark {
|
|
55
55
|
background: none !important;
|
|
56
56
|
|
|
57
|
-
tbody
|
|
58
|
-
tr
|
|
59
|
-
td
|
|
57
|
+
tbody {
|
|
58
|
+
tr {
|
|
59
|
+
td {
|
|
60
60
|
background: $table-dark-card-bg !important;
|
|
61
61
|
}
|
|
62
62
|
}
|
|
@@ -64,15 +64,15 @@ $table-dark-card-bg: $card_dark;
|
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
66
|
&.table-dark {
|
|
67
|
-
tbody
|
|
68
|
-
tr
|
|
69
|
-
td
|
|
67
|
+
tbody {
|
|
68
|
+
tr {
|
|
69
|
+
td {
|
|
70
70
|
&:first-child {
|
|
71
71
|
border-top-color: $border_dark !important;
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
&:first-child {
|
|
75
|
-
td
|
|
75
|
+
td {
|
|
76
76
|
border-top-width: 1px !important;
|
|
77
77
|
}
|
|
78
78
|
}
|
|
@@ -10,7 +10,7 @@ $text_align_values: (
|
|
|
10
10
|
);
|
|
11
11
|
|
|
12
12
|
[class^=pb_table] {
|
|
13
|
-
thead
|
|
13
|
+
thead {
|
|
14
14
|
[class^=pb_table_header_kit] {
|
|
15
15
|
@each $align_name, $align_value in $text_align_values {
|
|
16
16
|
&[class*=_align_#{$align_name}] {
|
|
@@ -32,7 +32,7 @@ $text_align_values: (
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
[class^=pb_table] {
|
|
35
|
-
thead
|
|
35
|
+
thead {
|
|
36
36
|
[class^=pb_th_active] {
|
|
37
37
|
color: $primary !important;
|
|
38
38
|
}
|
|
@@ -10,21 +10,21 @@
|
|
|
10
10
|
width: 100%;
|
|
11
11
|
background: none !important;
|
|
12
12
|
|
|
13
|
-
thead
|
|
14
|
-
tr
|
|
13
|
+
thead {
|
|
14
|
+
tr {
|
|
15
15
|
left: $offscreen;
|
|
16
16
|
position: absolute;
|
|
17
17
|
top: $offscreen;
|
|
18
18
|
|
|
19
|
-
th
|
|
19
|
+
th {
|
|
20
20
|
display: block;
|
|
21
21
|
visibility: visible;
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
|
-
tbody
|
|
26
|
-
tr
|
|
27
|
-
td
|
|
25
|
+
tbody {
|
|
26
|
+
tr {
|
|
27
|
+
td {
|
|
28
28
|
display: block;
|
|
29
29
|
visibility: visible;
|
|
30
30
|
border-left-width: 1px !important;
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
&:first-child {
|
|
66
|
-
td
|
|
66
|
+
td {
|
|
67
67
|
&:first-child {
|
|
68
68
|
margin-top: $space-xs !important;
|
|
69
69
|
}
|
|
@@ -74,9 +74,9 @@
|
|
|
74
74
|
&.table-card {
|
|
75
75
|
background: none !important;
|
|
76
76
|
|
|
77
|
-
tbody
|
|
78
|
-
tr
|
|
79
|
-
td
|
|
77
|
+
tbody {
|
|
78
|
+
tr {
|
|
79
|
+
td {
|
|
80
80
|
background: $white !important;
|
|
81
81
|
border-left-width: 1px !important;
|
|
82
82
|
border-right-width: 1px !important;
|
|
@@ -98,8 +98,8 @@
|
|
|
98
98
|
}
|
|
99
99
|
@media (hover:hover) {
|
|
100
100
|
&:hover {
|
|
101
|
-
tbody
|
|
102
|
-
tr
|
|
101
|
+
tbody {
|
|
102
|
+
tr {
|
|
103
103
|
box-shadow: 0 0 0 $white !important;
|
|
104
104
|
}
|
|
105
105
|
}
|
|
@@ -108,9 +108,9 @@
|
|
|
108
108
|
// reset the first and last to normalize
|
|
109
109
|
@each $name, $value in $cell-pad-list {
|
|
110
110
|
&.#{$name} {
|
|
111
|
-
tbody
|
|
112
|
-
tr
|
|
113
|
-
td
|
|
111
|
+
tbody {
|
|
112
|
+
tr {
|
|
113
|
+
td {
|
|
114
114
|
&:first-child,
|
|
115
115
|
&:last-child {
|
|
116
116
|
padding: $value $cell-gutter !important;
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
[class^=pb_table] {
|
|
2
2
|
&.vertical-border {
|
|
3
|
-
td,
|
|
3
|
+
td,
|
|
4
|
+
th {
|
|
4
5
|
border-right: 1px solid $border_light !important;
|
|
5
6
|
}
|
|
6
7
|
|
|
7
8
|
@media screen and (min-width: $screen-xs-min) {
|
|
8
|
-
tr:hover
|
|
9
|
-
td:last-child
|
|
9
|
+
tr:hover {
|
|
10
|
+
td:last-child {
|
|
10
11
|
border-right-color: darken($border_light, 10%) !important;
|
|
11
12
|
}
|
|
12
13
|
}
|
|
@@ -1,19 +1,9 @@
|
|
|
1
1
|
<%= content_tag(:div) do %>
|
|
2
|
-
|
|
3
|
-
<%= content_tag(:table,
|
|
2
|
+
<%= content_tag(:table,
|
|
4
3
|
aria: object.aria,
|
|
5
4
|
class: object.classname,
|
|
6
5
|
data: object.data,
|
|
7
6
|
id: object.id) do %>
|
|
8
|
-
|
|
9
|
-
<% end %>
|
|
10
|
-
<% else %>
|
|
11
|
-
<%= content_tag(:div,
|
|
12
|
-
aria: object.aria,
|
|
13
|
-
class: object.classname,
|
|
14
|
-
data: object.data,
|
|
15
|
-
id: object.id) do %>
|
|
16
|
-
<%= content.presence %>
|
|
17
|
-
<% end %>
|
|
7
|
+
<%= content.presence %>
|
|
18
8
|
<% end %>
|
|
19
9
|
<% end %>
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 13.19.0
|
|
4
|
+
version: 13.19.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
8
8
|
- Power Devs
|
|
9
|
-
autorequire:
|
|
9
|
+
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2024-02-
|
|
12
|
+
date: 2024-02-27 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionpack
|
|
@@ -2245,8 +2245,6 @@ files:
|
|
|
2245
2245
|
- app/pb_kits/playbook/pb_table/docs/_table_data_table.md
|
|
2246
2246
|
- app/pb_kits/playbook/pb_table/docs/_table_disable_hover.html.erb
|
|
2247
2247
|
- app/pb_kits/playbook/pb_table/docs/_table_disable_hover.jsx
|
|
2248
|
-
- app/pb_kits/playbook/pb_table/docs/_table_div.html.erb
|
|
2249
|
-
- app/pb_kits/playbook/pb_table/docs/_table_div.jsx
|
|
2250
2248
|
- app/pb_kits/playbook/pb_table/docs/_table_header.html.erb
|
|
2251
2249
|
- app/pb_kits/playbook/pb_table/docs/_table_header.md
|
|
2252
2250
|
- app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.html.erb
|
|
@@ -2851,7 +2849,7 @@ homepage: https://playbook.powerapp.cloud/
|
|
|
2851
2849
|
licenses:
|
|
2852
2850
|
- ISC
|
|
2853
2851
|
metadata: {}
|
|
2854
|
-
post_install_message:
|
|
2852
|
+
post_install_message:
|
|
2855
2853
|
rdoc_options: []
|
|
2856
2854
|
require_paths:
|
|
2857
2855
|
- lib
|
|
@@ -2862,12 +2860,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
2862
2860
|
version: '0'
|
|
2863
2861
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
2864
2862
|
requirements:
|
|
2865
|
-
- - "
|
|
2863
|
+
- - ">="
|
|
2866
2864
|
- !ruby/object:Gem::Version
|
|
2867
|
-
version:
|
|
2865
|
+
version: '0'
|
|
2868
2866
|
requirements: []
|
|
2869
2867
|
rubygems_version: 3.3.7
|
|
2870
|
-
signing_key:
|
|
2868
|
+
signing_key:
|
|
2871
2869
|
specification_version: 4
|
|
2872
2870
|
summary: Playbook Design System
|
|
2873
2871
|
test_files: []
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
<%= pb_rails("table", props: { size: "sm", tag: "div" }) do %>
|
|
2
|
-
<div class="pb_table_thead">
|
|
3
|
-
<div class="pb_table_tr">
|
|
4
|
-
<div class="pb_table_th">Column 1</div>
|
|
5
|
-
<div class="pb_table_th">Column 2</div>
|
|
6
|
-
<div class="pb_table_th">Column 3</div>
|
|
7
|
-
<div class="pb_table_th">Column 4</div>
|
|
8
|
-
<div class="pb_table_th">Column 5</div>
|
|
9
|
-
</div>
|
|
10
|
-
</div>
|
|
11
|
-
<div class="pb_table_tbody">
|
|
12
|
-
<div class="pb_table_tr">
|
|
13
|
-
<div class="pb_table_td">Value 1</div>
|
|
14
|
-
<div class="pb_table_td">Value 2</div>
|
|
15
|
-
<div class="pb_table_td">Value 3</div>
|
|
16
|
-
<div class="pb_table_td">Value 4</div>
|
|
17
|
-
<div class="pb_table_td">Value 5</div>
|
|
18
|
-
</div>
|
|
19
|
-
<div class="pb_table_tr">
|
|
20
|
-
<div class="pb_table_td">Value 1</div>
|
|
21
|
-
<div class="pb_table_td">Value 2</div>
|
|
22
|
-
<div class="pb_table_td">Value 3</div>
|
|
23
|
-
<div class="pb_table_td">Value 4</div>
|
|
24
|
-
<div class="pb_table_td">Value 5</div>
|
|
25
|
-
</div>
|
|
26
|
-
<div class="pb_table_tr">
|
|
27
|
-
<div class="pb_table_td">Value 1</div>
|
|
28
|
-
<div class="pb_table_td">Value 2</div>
|
|
29
|
-
<div class="pb_table_td">Value 3</div>
|
|
30
|
-
<div class="pb_table_td">Value 4</div>
|
|
31
|
-
<div class="pb_table_td">Value 5</div>
|
|
32
|
-
</div>
|
|
33
|
-
</div>
|
|
34
|
-
<% end %>
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import Table from '../_table'
|
|
3
|
-
|
|
4
|
-
const TableDiv = (props) => {
|
|
5
|
-
return (
|
|
6
|
-
<Table
|
|
7
|
-
size="sm"
|
|
8
|
-
tag="div"
|
|
9
|
-
{...props}
|
|
10
|
-
>
|
|
11
|
-
<div className="pb_table_thead">
|
|
12
|
-
<div className="pb_table_tr">
|
|
13
|
-
<div className="pb_table_th">{'Column 1'}</div>
|
|
14
|
-
<div className="pb_table_th">{'Column 2'}</div>
|
|
15
|
-
<div className="pb_table_th">{'Column 3'}</div>
|
|
16
|
-
<div className="pb_table_th">{'Column 4'}</div>
|
|
17
|
-
<div className="pb_table_th">{'Column 5'}</div>
|
|
18
|
-
</div>
|
|
19
|
-
</div>
|
|
20
|
-
<div className="pb_table_tbody">
|
|
21
|
-
<div className="pb_table_tr">
|
|
22
|
-
<div className="pb_table_td">{'Value 1'}</div>
|
|
23
|
-
<div className="pb_table_td">{'Value 2'}</div>
|
|
24
|
-
<div className="pb_table_td">{'Value 3'}</div>
|
|
25
|
-
<div className="pb_table_td">{'Value 4'}</div>
|
|
26
|
-
<div className="pb_table_td">{'Value 5'}</div>
|
|
27
|
-
</div>
|
|
28
|
-
<div className="pb_table_tr">
|
|
29
|
-
<div className="pb_table_td">{'Value 1'}</div>
|
|
30
|
-
<div className="pb_table_td">{'Value 2'}</div>
|
|
31
|
-
<div className="pb_table_td">{'Value 3'}</div>
|
|
32
|
-
<div className="pb_table_td">{'Value 4'}</div>
|
|
33
|
-
<div className="pb_table_td">{'Value 5'}</div>
|
|
34
|
-
</div>
|
|
35
|
-
<div className="pb_table_tr">
|
|
36
|
-
<div className="pb_table_td">{'Value 1'}</div>
|
|
37
|
-
<div className="pb_table_td">{'Value 2'}</div>
|
|
38
|
-
<div className="pb_table_td">{'Value 3'}</div>
|
|
39
|
-
<div className="pb_table_td">{'Value 4'}</div>
|
|
40
|
-
<div className="pb_table_td">{'Value 5'}</div>
|
|
41
|
-
</div>
|
|
42
|
-
</div>
|
|
43
|
-
</Table>
|
|
44
|
-
)
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
export default TableDiv
|